适配常见问题

一、单位

• px 固定的单位；
• em 是根据其父元素的字体大小来设置（太多的不确定性）；
• rem 是根据网页的根元素（html）来设置字体大小。
• vw window.innerWidth 的数值的 1%
• vh window.innerHeight 的数值的 1%
• rpx: （小程序单位）可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 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...