响应式Web设计基础

本文所有内容来自Responsive Web Design Fundamentals

手机、大屏手机、平板电脑、桌面电脑、游戏控制台、电视、甚至是可穿戴设备，如此多的设备也形成了多种多样的屏幕尺寸。屏幕的大小总在变，我们需要我们的网页今后能够适应任何屏幕尺寸

响应式Web设计，最初的定义（Ethan Marcotte in A List Apart）是让网页响应用户及其所用设备的需求。在响应式设计中，布局将会随着设备的屏幕尺寸和显示能力而改变。比如，在手机上，用户只看到包含内容的单列视图，而在平板电脑中则能看到两列

设置视口信息

网页若需要适配不同的设备，在其文档的head元素中，需要包含一个meta元素，这个meta元素视口控制信息。这个meta元素告诉浏览器如何控制页面的尺寸缩放

长话短说

1. 使用meta元素，里面包含视口控制信息去控制浏览器视口的宽度和缩放
2. 写入width=device-width去使用设备的像素去匹配屏幕的宽度
3. 写入initial-scale=1去建立CSS像素与设备像素的1:1对等关系
4. 保证你的页面在用户缩放的时候依旧可用

最佳实践

为了提供最佳的用户体验，手机浏览器一般以980px（这个值会可能在不同设备中略有不同）的宽度渲染页面，然后会尝试去减少文字大小以及缩放内容到屏幕大小来让内容看起来更加适于阅读。对于用户来说，这也意味着字体的大小可能会不一致，用户需要通过双击或手势缩放来放大网页，这样才能看到内容并与之交互

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

有一些浏览器会在横竖屏切换时保持页面宽度不变，他们仅仅会进行缩放，而不会让内容回流来适应屏幕。增加属性initial-scale=1告诉浏览器去建立CSS像素和设备像素的1:1对等关系，而无视设备的方向，这样网页就能适应横竖屏的宽度变化了我们可以使用meta标签来指定viewport信息，这里width=device-width表明页面将会以设备的像素大小来适配屏幕宽度。这样无论是在小屏幕手机上还是大屏幕显示器上，页面都可以为不同的屏幕尺寸进行内容的回流

使用一个逗号去区分属性保持老式浏览器也能获取到值

确定一个可访问的视口

除了使用initial-scale，也可以在视口控制信息中加入minimum-scale,maximum-scale和user-scalable等属性。这些值将限制用户缩放视口的比例，可能会降低网页的可访问性

使得内容适配视口

无论是手机还是桌面电脑，用户通常是垂直滚动页。也就是说，强迫用户水平滚动页面或者必须缩放才能看到整个页面，都会降低用户体验

长话短说

1. 不要为元素设定大且固定的尺寸
2. 内容的展现不应该依赖于一个特定的视口宽度
3. 使用CSS的媒体查询来为不同的屏幕尺寸提供不同的样式

最佳实践

在开发手机网页中使用meta viewport元素进行开发时，很容易导致页面内容无法匹配某些特定的视口。比如，一张图片能够在较宽呃视口中完全显示，但在较窄的视口中则必须要水平滚动才能看到右边的部分。我们需要调整页面内容来适应视口的宽度，这样它们就不需要水平滚动了

由于不同设备基于CSS像素的尺寸和宽度不同（手机和平板之间不同，甚至不同的手机之间也不同），所以页面内容不能只依赖于一个特定的视口宽度。

如果元素设定了较大的绝对宽度，元素在窄设备中将由于太宽而只能显示一部分。取而代之，考虑使用相对宽度（如width: 100%）

为响应式使用CSS的媒体查询

媒体查询其实能在CSS样式中使用的过滤器，他们能够很轻易的根据设备的特点来改变渲染网页内容的CSS样式，这些特点包括设备的显示类型，宽高，横竖屏甚至是分辨率

长话短说

1. 媒体查询可以根据设备特点来应用样式
2. 使用min-width而不是min-device-width来保证更多情况下能有好的体验
3. 为元素使用相对大小防止破坏布局

最佳实践

比如，我们可以通过这样的方式加入打印时需要的样式：

<link rel="stylesheet" href="print.css" media="print">

 

除了在样式的link元素中增加media属性，还有两种其他方法在CSS文件在中使用媒体查询：@media和@import。处于效率考虑，推荐使用前两种方式 

@media print {
  /* print style sheets go here */
}

@import url(print.css) print;

根据视口大小使用媒体查询媒体查询中的逻辑不会互相冲突，并且符合媒体查询条件而引入的CSS样式也会根据CSS优先级标准作用与页面中

媒体查询为创建响应式的体验成为可能，通过媒体查询，我们能为小屏幕，大屏幕，或者两者之间来提供特定的样式表。媒体查询的语法允许我们根据设备的特点来创建匹配规则：

@media (query) {
  /* CSS Rules used when query matches */
}

 

媒体查询提供了很多查询条件供我们使用，其中我们在响应式web设计中用的最多是min-width、max-width、min-height、max-height 

• min-width: 匹配所有宽度大于设定值的浏览器
• max-width: 匹配所有宽度小于设定值的浏览器
• min-height: 匹配所有高度大于设定值的浏览器
• max-height: 匹配所有高度小于设定值的浏览器
• orientation=portrait: 匹配竖屏，也就是高度大于或等于宽度
• orientation=landscape: 匹配横屏，也就是宽度大于或等于高度

关于min-device-width

除了*-width，我们也可以在媒体查询中使用*-device-width，这两者有微妙且重要的差异。min-width检测的是浏览器的窗口的尺寸，而min-device-width检测的则是屏幕的尺寸

在手机上，这个差异一般不会有什么影响，毕竟用户不能自由调整窗口的尺寸。但在桌面上，用户能够自由控制窗口尺寸并希望网页内容能够很自然的适应窗口，所以，应当尽量避免使用*-device-width，否则网页将无法响应桌面浏览器窗口的缩放

使用相对单位

响应式设计的一个关键概念就是流动性和比例性，而不是使用固定宽度进行布局。计量时使用相对单位能够简化布局，并防止出现创建的组件对于视口过大的情况。

比如，将顶层宽度设为100%，使其宽度撑开到整个视口大小，它的宽度永远不会大于或小于视口大小。这个div无论在iPhone的320px、黑莓Z10的342px还是Nexus 5的360px下，都能横向填满屏幕

另外使用相对单位允许浏览器在用户缩放网页时重新渲染整个页面，而不会增加一个水平滚动条。

如何选择断点

尽管哦我们可以考虑基于设备类型来定义断点，但需要谨慎使用这种方式。基于特定的的设备、产品、品牌名称或操作系统定义断点，就算今天能正常使用，以后也会出现维护上的噩梦。取而代之的是，网页内容应该根据其自身来决定如何在容器中进行布局。

长话短说

1. 基于网页内容创建断点，永远不要基于特定的设备、产品或品牌
2. 以移动先行的思想设计网页，然后随着屏幕可用大小增加而渐进增强用户体验
3. 保持每一行文字的最大宽度在70到80个字符左右

从小到大来挑选主要断点

首先，在较小的屏幕尺寸上设计网页，然后主键扩大屏幕大小直到必须要增加断点。这样断点的选取是基于网页内容，并且断点会尽可能的少。

必要时添加次要断点

除了显著影响布局的主要断点外，用于小范围调整的次要断点也非常有用。比如在主要断点中间，增加一些次要断点来调整元素的margin或padding，或者增加文本大小让他们在布局中显得更加自然

优化文本阅读

传统的可读性理论建议一个理想的列每一行应该包含70到80个字符(8~10个英文单词)，也就是说，每当一行单词数量增加到10个时，我们就应该就应该加一个断点了

不要完全隐藏内容

当需要根据屏幕大小选择行的显示内容时，需要注意。不要简单的由于其无法适应屏幕就将其隐藏。屏幕的大小并不能说明用户想要什么。比如，在天气预报中移除了花粉浓度对于一个不外出或没有花粉过敏症呃人来说可能没什么，但对于患有花粉过敏症的人来说就很致命了