响应布局随笔记录
/* Default wide-screen styles */
@media all and (max-width: 1024px) {
/* styles for narrow desktop browsers and iPad landscape */
}
@media all and (max-width: 768px) {
/* styles for narrower desktop browsers and iPad portrait */
}
@media all and (max-width: 480px) {
/* styles for iPhone/Android landscape (and really narrow browser windows) */
}
@media all and (max-width: 320px) {
/* styles for iPhone/Android portrait */
}
@media all and (max-width: 240px) {
/* styles for smaller devices */
}
<meta name="viewport" content="...">
● width=device-width
我们看见很多网站都建议把content属性的值设置为width=device-width。这相当于告诉浏览器将页面宽度假设为设备宽度。不幸 的是，只有当设备是纵向时假设才是正确的。当我们把设备旋转成横向时，device-width还是和纵向的一样（比如，320px），这意味着，即使我 们把页面设计成适应了480px横向设备，它还是会返回320px的效果。
曾经尝试在media query里使用orientation来解决这个问题，但是orientation不会真正的告诉我们实际的设备宽度，因为它只告诉我们设备的宽度是大于还是小于设备的高度。正如有人指出，由于大部分网页往往垂直滚动，所以这是无关紧要的。
如果我们的页面在纵向和横向设备中样式相同，那么我们就可以用width=device-width就足够了，需要注意的是这个是唯一告诉android设备使用设备宽度的方法。
● initial-scale=1.0,maximum-scale=1.0
initial-scale=1设置告诉浏览器初始化页面时不要对页面进行缩放。解决了没有使用viewport时出现的页面缩放问题。但还是有bug，当我们把移动端设备从纵向转成横向时，你就会发现这个问题了。这是因为initial- scale只在页面完全加载后有作用。在我们把移动设备从纵向转成横向的过程中，浏览器就会认为页面不变，但scales会设置为1.5，为了使 320px的页面适应480px。但是，因为我们在@media queries中设置了480px这个宽度，那么页面CSS规则也会是适应480px的。结果就是，页面CSS规则是适应480px的，另外scale还 是1.5。这个结果并不可怕，但是不可取。
为解决这个bug，我们可以添加maximum-scale=1这个设置。它的作用是阻止页面在旋转时放大，但它同时带来了更严重的问题：也阻止了用户手动放大或缩小页面。同样user-scalable=no设置也会让用户不能缩放页面。所以一般情况下，不要使用以上俩个设置。
是不是无法解决这个bug了？首先这个bug最多只是在显示层面，带来的后果一点不严重，因为即使页面自动缩放了，它还是成比例的。
有些人建议在viewport里使用特定的width，并且也按这个width设计页面。如果你可以为每个种类的device编写页面的话，这个设 置是可行的，但需要我们明白的是它不是响应式设计。打印时，使用固定宽度布局是必要的，但我们网页应该适应用户的各种样式的设备。总之，不要这样使用。
● @media all and (device-width:480)
这是个media query而不是viewport标签里的选项, 我在很多地方看到过这样的代码，但我并不认为这是好的做法。为什么？根据CSS3对media queries的描述，device-width在media queries里表示的是输出设备表面渲染的宽度。对于continuous media来说，device-width就是屏幕的宽度；对于paged media来说，device-width就是页面尺寸的宽度。以continuous media为例，device-width就是设备屏幕的宽度。除非浏览器最大化，它始终大于viewport的width。
测试表明，大多数桌面浏览器把device-width和width当作同义词。而移动端浏览器对此会有点混淆。至于viewport标签 里，device-width只在纵向时等于设备的width。例如，一个320*480的设备，device-width总是320px，不论方向。然 而对于CSS media queries，device-width是基于其目前方向上屏幕的width。
如果你一定要这样使用，请和orientation一起使用。但绝对不要使用max-device-width和min-device-width，因为用max-width和min-width替换会比较好。同样需要注意的是，新型号设备的宽度可能会改变。
上面我提到过，我们可以为任意数量的width来设计页面。最重要的是在不同width的浏览器中测试他们，通过调整window浏览器的大小来测 试是最简单的方法。随着设计页面的width越来越小，我们可以去掉（Display：none；）一些不重要的内容，比如 footer，sidebars，menu等，为主要内容留足够大的空间。我们的网站也许需要一个可以在所有width屏幕上运行良好的布局，也许只需要 满足两到三个布局。这是非常容易设计和测试的，所以没有理由不做。
最后，是我推荐的做法：
1. 使用viewport标签
2. 使用media queries来选择最适合页面尺寸的CSS
3. 在viewport标签里，使用width=device-width,initial-scale=1或者单独使用width=device-width
4. 不要使用maximum-scale=1和user-scalable=no
5. 不要使用width=<specific width>
6. 不要使用@media all and (*-device-width: xxx)
转载:http://blog.jobbole.com/18179/
