响应式布局

前端

几种布局方式

静态布局（static layout）
即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位，这种设计常见于pc端。

流式布局（Liquid Layout）

• 流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）

• 屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。

• 使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。

• 在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调

自适应布局（Adaptive Layout）

• 自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围

• 使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

弹性布局（rem/em布局）

• 我们可以通过响应式的设计和开发思路让页面更加”弹性”了。图片的尺寸可以自动调整，页面布 局再不会被破坏。虽然永远没有最完美的方案，但它给了我们更多选择。无论用户切换设备的屏幕定向方 式，还是从台式机屏幕转到iPad上浏览，页面都会真正的富有弹性。

响应式布局（Responsive Layout）
* 布局综合体
* 流式布局（解决屏幕跨度小时的差异）
* 媒体查询（解决屏幕跨度大）
* 弹性布局（解决屏幕跨度下字体间距比例问题）
* 优点：适应pc和移动端，如果足够耐心，效果完美。
* 缺点：
（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。
（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

• 布局单位的补充：
  https://www.zybuluo.com/buoge/note/990718

结论
1.如果只做pc端，那么静态布局（定宽度）是最好的选择；
2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。
http://www.cnblogs.com/zhuzhenwei918/p/7147303.html

响应式设计快速指南

https://www.kancloud.cn/kancloud/responsive-typography/70844#_20

排版和栅格系统

https://v3.bootcss.com/css/

阮一峰：自适应网页设计

http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

bootstrap 的桎梏

http://www.labazhou.net/2014/10/why-dont-you-use-bootstrap/

https://juejin.im/entry/5922b08ca0bb9f005f629703

uisdc 响应式布局

http://www.uisdc.com/tag/%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1