响应式布局

前端布局设计

静态布局（static layout / fixed layout）

布局特点

固定宽度的布局方式，所有元素尺寸一律使用px单位。页面宽度大于固定宽度时，内容居中外加背景；页面宽度小于固定宽度时，出现水平滚动条；在移动设备上会自动缩放，再通过放大查看局部

设计方法

1. PC：居中布局，所有样式尺寸使用绝对单位px
2. 移动端：单独开发移动端页面

• 在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而占满整个屏幕。
• 在viewport meta标签上设置content”width=640,user-scalable=no“，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩放页面至占满全屏。

  优点

  无需考虑兼容性问题
  对于ui设计师和前端开发人员来说，静态布局实现最简单。

  缺点

  在过大或过小尺寸的屏幕上显示不佳。若屏幕过大，两侧留白太多，若屏幕过小，出现水平滚动条体验不佳。
  PC和移动端需要分别设计、开发

  自适应布局（adaptive layout）

  布局特点

  自适应布局也使用固定单位，应用媒体查询定义多个固定宽度，即根据不同尺寸屏幕创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

  设计方法

  使用CSS3 @media媒体查询技术给不同尺寸的设备设置不同的样式，可以给适配范围内的设备较好的体验。在一个分辨率范围内依然是静态布局

  优点

  将已有的传统静态布局改造为适配移动设备的布局，自适应布局是一个很好的选择。
  自适应布局对比响应式布局开发量小

  缺点

  两个分辨率范围中间的部分可能出现显示不够理想的情况

  流式布局（liquid layout / fluid layout）

  布局特点

  页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。

  设计方法

1. 使用%百分比（搭配min-、max-属性使用）定义宽度，高度大都是用px来固定住
2. 使用相对测量单位书写元素尺寸，如em、rem、vh、vw等相对单位

   优点

   使用方法1+方法2，可以使布局和页面元素流式显示

   缺点

   响应式布局（responsive layout）

   布局特点

   响应式设计的目的是确保一个页面在不同设备上（各种尺寸的PC浏览器、移动端设备、手表、电视等等）都能显示出令人满意的效果。响应式布局可以理解为自适应布局 + 流式布局的融合。
   使用媒体查询技术为不同分辨率屏幕定义布局，同时在每个布局中，使用流式布局的设计理念，元素尺寸随窗口调整自动适配，即根据不同分辨率屏幕创建多个流式布局。每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变

   设计方法

   流式布局 + 弹性布局 + 媒体查询
   一般，响应式布局是mobile-first的。设计人员优先设计移动端布局样式，根据移动端再扩展平板、PC的布局样式。

   优点

   一套代码可以同时适配多端，并且可以在主流尺寸的屏幕上显示良好

   缺点

   要适配足够多的分辨率，开发、测试工作量都较大

<!— 响应式页面在头部会加上这一段代码 —>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">

[1]（user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。 ）

响应式设计的常用技术

• 栅格系统
• 媒体查询（IE9及以上）IE8需配合respond.js
• 相对单位（em, rem, vh, vm, ）（IE9及以上）
• flexbox（IE10及以上）
• viewport

浏览器兼容

Can I use … https://caniuse.com/

• 不支持flexbox
• 不支持相对单位（em, rem, vh, vm, ）
• 不支持媒体查询 可使用respond.js

• 不支持ES5特性

  Features includeFunction.prototype.bind, Array methods likeindexOf,forEach,map&filter, Object methods likedefineProperty,create&keys, thetrimmethod on Strings and many more.

• 对比IE11 [Can I use… Support tables for HTML5, CSS3, etc]

设备适配

常见机型: http://screensiz.es/

兼容IE8的响应式设计