响应式布局方案

Posted 2021-09-13 穿职业装的程序媛

首先看看几种典型的响应式布局方案：

1. 传统布局，px做单位
2. 相对单位布局
3. 通过媒体查询实现响应式布局
4. 基于rem的flexible布局
5. flex\\grid
6. 借助javascript进行布局

要实现灵活的响应式布局，尤其是在移动端适应不同屏幕，我们需要选择整体样式侵入性较小、实现简单的布局方案。一般采用相对单位布局，下面简单了解一下相对布局，怎么使用，相对于谁

（1）em
em是相对于当前元素或者当前元素继承来的字体的宽度。em并不是总是相对于父元素的字体大小，在实际中，“相对于谁”取决于应用于什么CSS属性。如line-height属性中，em是相对于自身的字体大小。

（2）rem
相对于根节点html元素的字体大小。淘宝和网易的自适应布局方案都是以rem为核心的，但是他们都有所不同。网易方案中，包括字体font-size在内的属性，都是以rem为单位，淘宝方案中，会在body元素上加上默认12px的字体大小。

（3）vw
vw是相对于视口宽度，100vw等于一个视口宽度，vh与vw同理，100vh等于一个视口高度。

（4）%
%的相对对象比较复杂，在不同的属性中，其对象都不一样。如：
position:absolute 中，元素的left\\top等采用%做单位，这里的%是相对于参照物的，如left是相对于父元素的宽，top是相对于父元素的搞
position: relative 中，元素在有自己本来的位置的同时，还可以用left\\top等采用%做单位表示相对于自身本来位置的便宜，left相对于自身的宽，top相对于自身的高
position: fixed 中，毫无疑问，元素的left\\top等采用%做单位，是相对于整个视口的
margin\\padding 中，%是相对于父元素的宽
border-radius 中，%相对于自身宽高
background-size 中，%相对于自身宽高
font-size 中，%相对于父元素的字体大小
line-height 中，%相对于自身字体大小

（5）calc
响应式布局计算单位，使得CSS有了计算的能力