响应式网站前端设计的几个重点

响应式网站的重点，大致有以下几点：

1、控制大小

习惯了电脑页面的前端开发者可能更加喜欢用pc来控制大小，但在响应式的页面中出现更多的是em和rem，用它们来控制字体大小甚至是框体大小对整体的效果非常明显，如字体设置是10px/20px/30px，不同的显示器字体会有大小的差异，如果页面特别复杂或文字很多的话，这些字体的大小设置也会带来不小的工作量，但在响应式页面中就不一样：您会发现字体会撑的很大，甚至有个别占满了手机屏幕，这对移动端用户的体验是致命的。如果把它们在不同分辨率下一一调整好可能需要写很多的css代码，但如果用em/rem，就能够把工作量大大减小，同时还能够保证字体的统一比例。

2、框架

前端框架不少都是前端类型的设计，并不建议新手前端盲目的使用框架来布局，不管框架看起来多美好。在实际的使用过程中大家可能会发现很多问题，比如类名太多太复杂、样式冲突。引入资源过多导致页面繁重、偏离设计效果等等。一些框架过度的依赖AJAX，大量的AJAX在前端看起来的确很酷，对用户的友好性也足够强，但大量的请求对服务器并不友好，可能会使服务器的实际负载大大下降。总之还是一句话，按实际需求来解决问题，框架并不是万能的。

3、Media Query 它既能够准确的识别设备也能够自己设定分辨率或者宽度

4、百分比

百分比式的布局，在关键的宽度设置下百分比能够起到出乎意料的效果：

box1{ width:100%;}

ul{ margin:0 2%;}

我并不是推崇全部使用百分比来布局，但有时候这可能会大大减少工作量，给box1宽度设置100%之后它会自动以宽度填充满整个浏览器，不管你是手机PC什么分辨率，它总是有很好的表现。这时候你给box1下面的ul设置左右2%的margin也是如此，随着浏览器窗口大小改变时ul的实际margin大小也会随着变化，这么一说大家多少也都理解了百分比布局的概念。当然有时候也不会有想象中的效果，特别是在较小的分辨率上时，原来看似不错的百分比设定会显得很怪，因为响应式多数时候只约定宽度，长度都是由文档和浏览器来决定的，这时候想要在所有的终端上都有很好的体验就需要Media Query来解决问题。

我公司开发的响应式网站页面美观时尚，视觉冲击力强，客户体验佳，期待和您的合作。