响应式设计

《CSS设计指南(第3版)》第8章响应式设计 读书笔记

​ 今天的网页布局必须能根据它所处的不同环境作出影响。在大屏幕上，多栏布局效果很好，但在手机上，就没法看。

​ 实际上，使用一项叫媒体查询的CSS功能，很容易检测出用户设备的屏幕大小。然后，提供代替或额外的CSS，可针对相应屏幕实现更加优化的体验。这个方式创建的对设备有感知力的网站，被称为响应式设计。

​ 本章展示在屏幕越来越小的设备上优化PC端页面的全过程。

小设备上的大布局

​ 在iPad或移动端上的网页效果，如下图。

​ iPad和iPhone会自动缩小页面以填满整个屏幕，但是页面布局在小屏幕上没法看。

​ 很显然，一种布局不能适应多种屏幕尺寸。需要一种都够检测屏幕大小的方法，然后相应地修改布局。简而言之：就是需要让页面自己相应屏幕变化。看一下需要哪些技术，首先是媒体查询。

响应式设计的要素

响应式设计包含三个重要的方面：

• 媒体查询：是一种CSS语法，可以根据浏览器的特性，一般是屏幕或浏览器容器宽度提供CSS规则
• 流式布局：使用em或百分比等相对单位设定页面总体宽度，让布局能够随屏幕大小而缩放
• 弹性图片：使用相对单位确保图片再大也不会超过其容器

媒体查询

​ 媒体查询是CSS代码的容器（就是可以写CSS代码的地方），其中的CSS只在某些条件（如，当前页面要被打印、显示在某种类型或尺寸的屏幕上）时才会应用。

​ 媒体查询的两种方式：

• @media规则
• <link>标签的media属性

@media规则

​ 第一种方式是@media规则，可以在样式表或<style>标签的CSS中包含媒体查询。

# 规则声明:如果当前压面要打印,那么就不显示nav元素
@media print{
    nav {
        dispaly: none;
    }
}

​ 这里是把CSS规则嵌套在了一个@media规则中。尽管可以把CSS嵌套在一个媒体查询中，但媒体查询本身却不能相互嵌套。

# 在屏幕最大宽度小于568px时应用
# 取消float浮动,让布局区块上下堆叠,且让该元素宽度为屏幕的96%,同时在屏幕上居中
@media screen and (max-width:568px){
    .column {
        float: none;
        width: 96%;
        margin: 0 auto;
    }
}

​ 简单理解，就是响应设备必须是一块最大屏幕宽度不超度568像素的屏幕（比如浏览器或智能手机）。因此这条规则不会应用给1024x768像素的iPad。

​ 下面在看看如何在<link>标签的media属性里写媒体查询。

谈谈媒体查询

• 媒体类型

  最常用的媒体类型如下所示：

  1. all：匹配所有设备

  2. handled：匹配手持设备，如小屏幕、单色、带宽有限

  3. print：匹配分页媒体或打印预览模式下的屏幕

  4. screen：匹配彩色屏幕

  5. 其他媒体类型

     braille：盲文点字触觉反馈设备

     embossed：盲文分页打印机

     projection：投影仪

     speech：语音合成器

     tty：电话机屏幕等固定宽度字符栅格设备

     tv：电视机

  当然，任意时刻浏览器窗口只能使用一种媒体类型。媒体类型IE6开始支持，媒体特性IE9以上才得到支持。一般来说这并不是问题，因为我们使用媒体特性多数情况下都是为了检测平板电脑或智能手机等现代设备。

• 媒体特性

  媒体特性是媒体某一方面的特征，一般带有max-或min-的前缀。最常用的媒体特性如下：

  1. min-device-width和max-device-width：匹配设备屏幕的尺寸

  2. min-width和max-width：匹配视口的宽度，例如浏览器的宽度
  3. orientation(值为portrait和landspace)：匹配设备是横屏还是竖屏

  如果想通过媒体查询根据用户对浏览器的缩放重新调整布局，应该是用min-width和max-width。

可以使用逻辑运算符and,not,or及关键字all,only组合媒体类型和媒体特性。

其中，only关键字可以用来对不支持媒体查询的浏览器隐藏样式表。

<link>标签和media属性

​ 如果想通过媒体查询应用的CSS规则非常多，那么可以使用<link>标签的media属性设定条件,有选择的加载独立地样式表。

示例

<link type="text/css" media="print" href="css/print_styles.css" />
<link type="text/css" media=screen and (max-width:568px)" href="css/iphone_style.css" />

​ 这里的CSS样式表会根据media属性中的指定的条件应用。而且，查看页面如果是大显示器或iPad,则浏览器根本不会加载上面例子中的第二个样式表。第二个样式表只会被查看该页面的智能手机加载。那怎么使用媒体查询最直观呢？最直观的方式莫过于**根据不同的断点**来编写媒体查询

断点

​ 断点(breakpoint)在这里指的是媒体查询起作用的屏幕宽度，其写法类似如下形式。

@media screen and (max-width:640px) {/*CSS规则*/ }

​ 在这里，断点是640px宽。如果有设备的屏幕宽度等于或小于断点设定的宽度，那么后面的CSS就会起作用。

​ 有人会使用断点去匹配特定的设备的屏幕宽度。但是该书建议：不要简单地用断点去匹配设备宽度，而是可以从慢慢地缩小浏览器窗口开始，当发现不合适的时候再确定断点，然后重编样式。不要很对某款具体的设备，而要为宽度在否个范围内的屏幕提供替代的布局，该布局对于范围内的设备都应该适用。

可以在电脑上就可以知道布局的像素宽度。

​ 通过缩小浏览器窗口，能够直观地感受到当前布局在小屏幕上的效果。不过，毋庸置疑，必须还要在小屏幕设备商进行测试。

​ 小于或等于1000px像素的断点适合平板。在这样做之前，先讲一讲怎么取消iPhone和iPad中“缩小适应”的默认行为。

用<meta>标签设定视口

​ iPhone和iPad会把适合大屏幕的网页缩小，以便它们在较小的屏幕上能看到网页的全貌。如果想让自己的页面布局适应这些小屏幕，首先就要覆盖这种自动缩小的设定。方法：

# meta标签
# 告诉浏览器按照屏幕宽度来显示网页,不要缩小网页
# 让布局以实际宽度显示
<meta name="viewport" content="width=device-width;maximumscale=1.0" />

​ 这个标签可以让布局按实际宽度显示，但是在iOS设备中会引发一个已知的bug。后面交代该Bug的解决方法。

针对平板优化布局（未看）

​ 浏览器的网页布局，随着浏览器窗口变窄，布局的右边会被浏览器窗口切掉。因此，第一个断点应该设定在布局的固定宽度之上，1000px。如果浏览器窗口比这个还窄，布局就需要变成流动的。第7章中网页布局中所有结构化元素，使用的都是auto或百分比的宽度值，因此从固定到流动的转换很简单。

百分比宽度体现了响应式设计的第二个要素——流动布局。

/* 98%可以保证两边有一点边距,看起来更舒服*/
#wrapper {width: 98%;}

​ 不过，流动布局之后会出现几个问题。

针对智能手机的优化布局(未看)

​ 如果布局宽度到了640px一下（达到智能手机屏幕的宽度），那么上面网页的内容可能会重叠。现在，需要在这个宽度上增加一个新的断点。

最后两个问题（未看）

​ 还有两个问题需要解决，

• iOS设备上的重绘和缩放bug
• 让下拉菜单也支持触摸

移动Safari中的缩放bug

​ Safari Mobile中有一个bug，在设备从竖屏旋转到横屏时会导致缩放和重绘的问题。如下图，

​ 有一个JavaScript脚本可以解决这个问题。要了解关于这个bug 的更多信息，请参考这里：http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug。访问这里下载脚本：https://gist.github.com/901295。

让下拉菜单支持触摸

小结

​ 本章，看到了如何在响应式设计中运用媒体查询、流动布局和弹性图片，让相同的网页能都适应不同屏幕大小的设备。

​ 响应式设计是当前最新的Web设计思想，二技术、浏览器和硬件都在迅速发展和变化之中。