建站百科Website News

响应式网页不像传统网页只需考虑一种状态，不是交付一套设计稿就完事儿了，它给设计、前端和开发团队之间的协作模式带来新的挑战。在一个复杂产品响应式的项目里，交互每个阶段该产出什么?交互与视觉如何协作?前端何时介入?哪些事情让后端开发来做更合理?经历“玩客”先进版后，我们得到了一些答案。

响应式设计之所以叫响应式“设计”而不叫响应式“技术”，是因为它是一项设计先行的工作。需要设计先明确好响应方式再实现出来，不能出一套设计稿后等着前端看情况把它变成响应式网页。

一、控制大小

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

打个比方，我的字体设置是10px/20px/30px等等不同的，网站上不同的地方自然字体会有大小的差异这是必然的，如果一个页面足够复杂或是文字足够多的话，这些字体的大小设置也是一个量很大的工作，不过在响应式页面中你设计完它们并不是完事：你用手机浏览一下页面会发现字体会撑的很大，甚至有个别标题撑满了手机屏幕，这对移动端用户的体验影响可想而知。因此你要开始写媒体查询，然后发现一个页面有几十个字体需要设置，如果把它们在不同分辨率下一一调整你可能需要写百句以上的css代码，但如果你用em/rem，就能够把工作量大大减小，同时还能够字体的统一比例。

关于em/rem的解释大家可以自行搜索，网上这类教程数不胜数，实际上它们就和px一样简单，当我开始用之后也不过只花了几分钟熟悉它们。就像前面说的一样，你也可以用它们来控制框体的大小，然后再响应式的页面下统一缩放，当然这需要足够多的计算。另外值得一提的是字体图标也可以用它们来控制，具体可以参考不同“字体图标”的官方文档。

二、百分比

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

box1{ width:100%;}

我并不是推崇全部使用百分比来布局，但有时候这可能会大大减少工作量，给box1宽度设置100%之后它会自动以宽度填充满整个浏览器，不管你是手机PC什么分辨率，它总是有很好的表现。这时候你给box1下面的ul设置左右2%的margin也是如此，随着浏览器窗口大小改变时ul的实际margin大小也会随着变化，这么一说大家多少也都理解了百分比布局的概念。

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