一段时间前，小编对响应式的概念还是Bootstrap、Amaze之类的框架组件，用过几次也不以为然，小编想国内搜索引擎在提供移动搜索结果页时还是会给移动网站加分的，却不能像google一样识别响应式网站，可能还需要一段时间发展。但毫无疑问，现在Web趋势转向移动优先，当然，如果你使用域名或其他解决方案并非不可能，但响应可能更简单，发展前景也很好。

小编大致的梳理了几个响应式页面的重点，如果想往这方面发展或是对它有些兴趣，希望能给大家一点帮助。

控制大小

习惯了PC前端开发者可能更喜欢使用页面pc控制大小，但更多的是出现在响应页面上em和rem，用它们来控制字体大小，甚至框体大小，对整体效果非常明显。

例如，小编的字体设置是10px/20px/30px等等，网站上不同的地方自然字体会有不同的大小，这是不可避免的，如果一个页面足够复杂或足够的文本，这些字体的大小设置也是一个大量的工作，但在响应页面你设计它们不是完成：你用手机浏览页面会发现字体会支持很大，一些标题甚至充满了手机屏幕，这可以想象对移动用户体验的影响。因此你要开始写媒体查询，然后发现一个页面有几十个字体需要设置，如果把它们在不同分辨率下一一调整你可能需要写百句以上的css但如果你使用代码em/rem，可以大大降低工作量，保证字体的统一比例。

关于em/rem你可以自己搜索解释。网上有无数这样的教程。事实上，它们是和谐的px同样简单，当小编开始使用时，只需几分钟就能熟悉它们。

关于em/rem你可以自己搜索解释。网上有无数这样的教程。事实上，它们是和谐的px同样简单，当小边开始熟悉它们只需要几分钟。正如前面所说，你也可以用它们来控制框架的大小，然后在响应页面下统一缩放，当然，这需要足够的计算。此外，值得一提的是，字体图标也可以由它们控制，具体参考不同“字体图标”官方文档。

百分比

解决缩放问题的思路有好几种，最适合新手的无疑是百分比式的布局，百分比可以在关键宽度设置下产生意想不到的效果：

box1{ width:100%;}

ul{ margin:0 2%;}

小编并不提倡布局的所有百分比，但有时这可能会大大降低工作量box宽度设置100%后，会自动填充整个浏览器的宽度，不管你是手机PC它总是有很好的分辨率。这时候你给box1下面的ul设置约2%margin同样，随着浏览器窗口大小的变化，ul的实际margin大小也会随之变化，所以大家或多或少都理解百分比布局的概念。

当然，有时候也不会有想象中的效果，尤其是分辨率小的时候。看似不错的百分比设置会很奇怪，因为响应式大部分时间只约定宽度，长度由文档和浏览器决定。这个时候，如果你想在所有的终端上都有很好的体验，你需要Media Query解决问题。

Media Query

流行的解释是CSS媒体查询功能，既能准确识别设备，又能自行设置分辨率或宽度，w3cshool里有Media Query如果你认为文档太多，小编可以粗略地解释它的工作原理。

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

你可能会想到import，事实上，媒体查询是可以理解的。它设置了类似于不同宽度或设备的设置import的css规则保证了页面渲染的实际效果。

你可能会想到import，事实上，媒体查询是可以理解的。它设置了类似于不同宽度或设备的设置import的css规则保证了页面渲染的实际效果。

媒体查询也可以为一个页面准备多个不同的页面CSS，当设备尺寸不同时，使用不同的设备CSS如果样式文件比较大，也可以考虑这种方法。

说说框架

小编见过并实际使用的许多前端框架都是富有前端类型的设计。不建议新手盲目使用前端框架进行布局，无论框架看起来多么美观。在实际使用过程中，你可能会发现很多问题，比如太多多太复杂(不多css经验可能对约定的类名知之甚少)和风格冲突。过度引入资源导致页面繁重，偏离设计效果等。

有些框架过度依赖AJAX，他们可能有很好的想法，很多AJAX前端看起来很酷，对用户的友好性足够强，但大量的要求对服务器不友好，可能会大大降低服务器的实际负载。总之，框架不是万能的，根据实际需要解决问题。