css 布局方式有很多中，并且实现方法很多。
布局方式
静态布局
使用 px 作为单位
流式布局
宽度使用 % 作为单位，高度使用 px 作为单位
自适应布局
创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，使用 @media 媒体查询来切换多个布局
弹性布局
通常是指 rem 或 em 布局，rem 是相对于 html 元素的 font-size 大小而言的，而 em 是相对于其父元素（非 fint-size 的是相对于自身的 font-size）
基本概念
物理像素
物理像素被称为设备像素，是显示设备中一个最微小的物理部件，每个像素可以根据操作系统设置自己的颜色和亮度。
设备独立像素
设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以有程序使用的虚拟像素，然后由相关系统转换成物理像素
css 像素
css 像素是一个抽象的单位，主要用在浏览器上，用来精确度量web页面上的内容。在一般情况下，css 像素称为与设备无关的像素，简称 DIPs
屏幕密度
屏幕密度是指一个设备表面上存在的像素数量，通常以每英寸有多少个像素来计算。
设备像素比
设备像素比 = 物理像素 / 设备独立像素，简称 dpr
rem 单位
rem 就是相对于根元素 html 的 font-size 来做计算
视窗单位
- vw： 1vw 等于视窗宽度的 1%
- vh： 1vh 等于视窗高度的 1%
- vmin：选取 vm 和 vh 中最小的那个
- vmax：选取 vw 和 vh 中最大的那个
使用 rem 布局的方法
div {
font-size: 1.2rem; // 只跟跟元素有关
}
事实上，rem 是 px 和 em 间的相对单位折中方案，而且更易于使用。在一般情况下，我们对 font-size 使用 rem，对border 使用px，对padding、margin、border-radius 使用 em，在必要时，申明容器宽度时，使用百分比。
有时候我们还需要内嵌一段脚本去动态计算根元素大小
(function (doc, win) {
let docEl = doc.documentElement;
let resizeEvt = 'orientatiomchange' in window ? 'orientationchange' : 'resize';
let recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 14 * (clientWidth / 320) + 'px'
}
if (!doc.addEventListener) return
win.addEventListener(resizeEvt, recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)
但是可能会有抖动，并且需要 js 的支持
使用 vw/vh
首先，视窗是指浏览器内部的可视区域大小，也就是 window.innerWidth/window.innerHeight 大小。 一般做法是：根据设计稿的尺寸，转化成 vw 单位。无论文本还是布局高宽、间距都使用 vw
但是没有最小最大的限制，还有些浏览器不支持。
最优做法
最优做法是：搭配 vw 和 rem 1.给根元素大小设置 vw --- 动态改变大小 2. 限制跟元素 font-size 的最大最小值，配合 body 加上最大最小宽度
