表现层响应式：响应式布局和屏幕适配布局

1.响应式布局：

响应式布局是根据浏览器宽度，分辨率，横屏，竖屏等情况来自动改变元素展示的一种布局方式，一般可以使用栅格方式来实现，一般有两种思路，一种是桌面端浏览器优先，扩展到移动端浏览器适配，另一种是以移动端优先，扩展到桌面浏览器适配。由于移动端网络和计算机资源相对较少，一般推荐从移动端扩展到桌面浏览器适配。

2.屏幕适配布局：

在移动端结局内容按照不同屏幕大小自动等比例缩放的一种布局计算方式，一般只在移动端使用。

目前用的最成熟的是rem：计算rem一般有两种方法：

1.1rem = 屏幕的宽度*屏幕的分辨率/10 （这样1rem正好是屏幕宽度的10%）

2.1rem = 屏幕宽度/320*10（假如320像素的宽度为基准这样在宽度为320px的屏幕表示10px 在640px屏幕就是20px）

计算屏幕的宽度一般使用js获取。

还有一种更加好用的但是不太成熟的（vh vw vmax vmin）的方案。

另一种：flex布局（弹性布局）

兼容情况

IE10及以上、ios9及以上、android4.4及以上版本支持

特点

默认所有子元素都会在一行中显示，即使给子元素一个很大的宽度
父级加了这条属性，子级的float、vertical-align就会失效
如果兼容低版本的机型要加前缀-webkit-，包括后面讲的所有属性

容器属性（父元素样式）具体看菜鸟教程或阮一峰的教程，这里说一下一些重点知识。

flex-direction：子元素排列方向（主轴的方向，如果设置了column，则意味着主轴旋转了90度）
flex-wrap：换行方式
flex-flow：以上两种方式的简写
justify-content：水平对齐方式（子元素在主轴上的对齐方式）
align-items：垂直对齐方式（子元素在交叉轴上的对齐方式）
align-content：多行垂直对齐方式（多根轴线的对齐方式）

项目属性（子元素样式）

order：排列位置 //如果有两个的值是相等，按书写顺序排列
flex-grow：扩展比例
flex-grow 当父级的宽度大于所有子元素宽度之和时，根据父级的剩余空间，设置子元素的扩展比例（设置后，元素给的固定宽度会被覆盖）它是一个系数
默认为0，即如果存在剩余空间，也不扩展
剩余空间
剩余空间=父级的宽度-所有子元素的宽度和
注意：如果没有设置初始宽度，也没有内容，则默认为0，否则为内容的宽度。例如设置了文字，会撑开有初始宽度。
```
        子元素宽度计算公式
            子元素的宽度=（父级的宽度-所有子元素的宽度和）/所有子元素的flex-grow属性值之和*子元素的flex-grow属性值+子元素初始宽度
```
- 1
- 2
- 3

flex-shrink：收缩比例
flex-shrink 当所有子元素宽度之和大于父级宽度的时候，根据超出的空间，设置子元素的收缩比例（设置后，元素给的固定宽度会被覆盖）它是一个系数
默认为1，如果给个0的话，就不会收缩
超出空间
超出空间=所有子元素的宽度和-父级的宽度

        子元素宽度计算公式
            1、算出超出空间，所有子元素的宽度和-父级的宽度
            2、子元素的初始宽度*子元素的flex-shrink值
            3、算出第二步所有结果的和
            4、每个子元素的第二步/第三步*第一步
            5、子元素的初始宽度-第四步

flex-basis：元素的大小
flex：以上三个属性的简写
align-self：单独的垂直对齐方式（交叉轴方向上）

表现层响应式：响应式布局和屏幕适配布局

猜你喜欢