响应式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个时，咱们就应该就应该加一个断点了

不要彻底隐藏内容

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