一、单位

• px 固定的单位；
• em 是依据其父元素的字体大小来设置（太多的不确定性）；
• rem 是依据网页的根元素（html）来设置字体大小。
• vw window.innerWidth 的数值的 1%
• vh window.innerHeight 的数值的 1%

字体适配

html{
  /* 以 16px 为基数 */
  font-size: 100%;
}

@media screen and (max-width: 414px){
    html{
       /*// 以 8px 为基数 */
        font-size: 50%;
    }
}

@media screen and (min-width: 1366px){
    html{
      /*// 以 16px 为基数 */
        font-size: 100%; 
    }
}
.lma{
    font-size: 1rem;
    padding: 0.3rem;
}

二、srcset 提供多图像源

<img src="source.jpg" width="100%"
  srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">

2x、3x 示意指标屏幕的像素密度；400w、600w 示意指标浏览器的宽度的限度，如浏览器宽度 550w 时，匹配 600w 的 src。
通过 window.devicePixelRatio 来获取像素比

三、边框 1px 适配：伪类 +transform

原理是把原先元素的 border 去掉，而后利用 :before 或者 :after 重做 border，并 transform 的 scale 放大一半，原先的元素绝对定位，新做的 border 相对定位。

transform: scaleY(0.5);
transform: scale(0.5);

四、布局

前端的布局倒退历程经验了上面几个过程：

表格布局 –> 定位布局 –> 浮动布局 –> flexbox 布局 –> gridbox 布局

flexbox 是一维布局，只能在一条直线上搁置你的内容区块；

而 grid 是一个二维布局。它除了能够灵便的管制程度方向之外，还能轻易的管制垂直方向的布局模式。

参考链接：https://www.cnblogs.com/pinga…