响应式布局

[coconilu]

概述

响应式布局的含义是根据不同的设备或不同的可视窗口尺寸，展示更适合的页面布局给用户。

常见布局

1. 静态布局

布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。

设计方法：为PC和移动端设置不同的页面；借助viewport meta

2. 流式布局

布局特点：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。

设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。

3. 自适应布局

布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

设计方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。

4. 响应式布局

布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

设计方法：媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。

5. 弹性布局（rem/em布局）

布局特点：包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位（同「流式布局」或「静态/固定布局」）。

设计方法：使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。

em和rem

1. rem是基于html元素的字体大小来决定
2. 而em则根据使用它的元素的字体大小决定

meta 的 viewport

Value	可能值	描述
width	一个正整数或者字符串 device-width	以pixels（像素）为单位， 定义viewport（视口）的宽度。
height	一个正整数或者字符串 device-height	以pixels（像素）为单位， 定义viewport（视口）的高度。
initial-scale	一个0.0 到10.0之间的正数	定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与视口大小之间的缩放比率。
maximum-scale	一个0.0 到10.0之间的正数	定义缩放的最大值；它必须大于或等于minimum-scale的值，不然会导致不确定的行为发生。
minimum-scale	一个0.0 到10.0之间的正数	定义缩放的最小值；它必须小于或等于maximum-scale的值，不然会导致不确定的行为发生。
user-scalable	一个布尔值（yes或者no）	如果设置为 no，用户将不能放大或缩小网页。默认值为 yes。

响应式布局的方案

1. 媒体查询

在css文件里使用@media(max-width | min-width)分割不同宽度屏幕的样式

JS可以通过API：window.innerHeight和window.innerWeight获取可视窗口的高宽

2. 区分在不同尺寸下的可见性

确定什么是需要在小尺寸屏幕中隐藏 / 显示的，什么是需要在大尺寸屏幕中隐藏 / 显示的

3. 借助 Grid 系统

在网格系统中，使用autofit关键字和minmax函数，模板如下：

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

4. 设备查询

通过识别HTTP的请求头user-agent分流客户，返回PC端或移动端的页面。

淘宝就是这样处理的

Tips

object-fit

object-fit CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

fill，被替换的内容大小可以填充元素的内容框。
contain，被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。
cover，被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 
none，被替换的内容尺寸不会被改变。
scale-down，内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸。

参考

综合指南: 何时使用 Em 与 Rem
meta
响应式布局的一种简单实现
响应式 Web 设计技巧
Realizing common layouts using CSS Grid Layout
静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别