原文标题:正能量浅谈响应式网站建设前端设计!

　　国内搜索引擎技术还不是很成熟，百度建议移动站和PC端分开来做，但是随着技术的发展未来也会像谷歌一样识别响应式网站建设。毕竟方便节省资源和时间成本嘛，下面正能量浅谈下关于响应式网站建设前端设计的一些经验，感谢阅读。

　　1、响应式布局里的框架

　　bootstrap来说，如果你要设计一个类似于google的搜索框就显得很难，google类型的搜索框实际上是将一个input包含在box里面，然后在这个box里面再加上左右图标，如果你用bootstrap来做可能会出现很多莫名奇妙的冲突，但实际上你得到了什么呢?一个圆角一个行高?还是他的百分比宽度呢?这些用css来写只不过是几句代码的事。

　　还有一些框架过度的依赖AJAX，它们也许想法很好，大量的AJAX在前端看起来的确很酷，对用户的友好性也足够强，但大量的请求对服务器并不友好，可能会使服务器的实际负载大大下降。总之还是一句话，按实际需求来解决问题，框架并不是万能的。如有响应式网站制作的需求可以联系我们。

　　2、使用em和rem控制大小

　　习惯了PC页面的前端开发者可能更加喜欢用pc来控制大小，但在响应式的页面中出现更多的是em和rem，用它们来控制字体大小甚至是框体大小对整体的效果非常明显。能够把工作量大大减小，同时还能够保证字体的统一比例。

　　关于em和rem的解释大家可以自行搜索，网上这类教程数不胜数，实际上它们就和px一样简单，当我开始用之后也不过只花了几分钟熟悉它们。就像前面说的一样，你也可以用它们来控制框体的大小，然后再响应式的页面下统一缩放，当然这需要足够多的计算。另外值得一提的是字体图标也可以用它们来控制。推荐阅读：定制H5响应式网站建设的几大好处

　　3、关于百分比缩放问题

　　解决缩放问题的思路有好几种，最适合新手的无疑是百分比式的布局，在关键的宽度设置下百分比能够起到出乎意料的效果：

　　box1{ width:100%;}

　　ul{ margin:0 2%;}

　　有时候这可能会大大减少工作量，给box1宽度设置100%之后它会自动以宽度填充满整个浏览器，不管你是手机PC什么分辨率，它总是有很好的表现。这时候你给box1下面的ul设置左右2%的margin也是如此，随着浏览器窗口大小改变时ul的实际margin大小也会随着变化。

　　当然有时候也不会有想象中的效果，特别是在较小的分辨率上时，原来看似不错的百分比设定会显得很怪，因为响应式多数时候只约定宽度，长度都是由文档和浏览器来决定的，这时候想要在所有的终端上都有很好的体验就需要Media Query来解决问题。

　　4、Media Query

　　通俗的解释就是CSS的媒体查询功能，它既能够准确的识别设备也能够自己设定分辨率或者宽度，w3cshool里有Media Query的参考文档，如果你嫌文档太多我可以粗略的解释一下它的工作原理。

　　在有必要的时候你可能会给一个box设置高度，当box拥有500px高度时它可能在PC上看起来不错，但用手机打开时就有些吓人了，整个box充斥了页面，里面的内容排列混乱，严重的影响了用户体验，这时候你就可以使用媒体查询Media Query，用它单独的为不同大小的设置不同的高度，比如640/320打开时box时就分别处于300/200px的高度，这样看起来就不错了。

　　大家可能会想到import，实际上媒体查询就可以这样理解，它为不同的宽度或设备设定了类似于import的css规则，保证了实际渲染完成页面的效果。

　　正能量浅谈响应式网站建设前端设计由正能量深圳网站建设公司(http://www.znlds.com/)小编整理，如需转载请注明出处!

　　正能量专注网站建设，为客户量身定制各类网站建设业务，包含赢利型网站建设、企业型网站建设、商城型网站建设、微信小程序开发、APP开发制作、门户型网站建设、品牌型网站建设等各类网站建设，正能量实战经验丰富服务过上千家企业，成功案例众多。正能量以客户利益为出发点，为客户规划、定制符合企业营销价值的网站建设方案，提供从网站前期定位分析策划、技术架构，到网站界面设计、创意表现、站点架构搭建以及后续访问监控、维护、网站运营反馈建议等一系列服务。免费咨询电话：400-008-3268。