1：rem + 媒体查询 适配

媒体查询＋rem：

计算方式：逻辑像素（rem） = 物理像素/dpr/font-size的值

优点：适配、简单。缺点：计算麻烦、有误差、每适配一个手机就得写一个媒体查询。

2：rem + vw 适配 相对于视口的单位

1vw = 当前浏览器窗口的百分之一
100vw = 100%的宽度
没有滚动条的时候,两者是相等的
滚动条是占位置,100%的宽度是不包含滚动条的 两者是不相等的

    推算思路:
在移动端中 100vw相当于沾满整个浏览器
拿到ui设计图 1vw等于设计图的百分之一
100vw/设计图的大小 = 每一份的大小
量出设计图的某个盒子元素

    计算公式:
当设计图宽度为640px html{font-size:0.3125vw}
当设计图宽度为750px html{font-size:0.2667vw}

导航(100%*88px) => vw
导航的高度:88px/2 = 44rem

        总结:
当设计图宽度为640px html{font-size:0.3125vw}
当设计图宽度为750px html{font-size:0.2667vw}

3：flexible 适配方案

淘宝插件、flexible.js（动态生成dpr）、针对750px的设计图设计的插件。

使用方法：需要删除页面中的视口文件、引入插件文件、计算公式 物理像素/100= ？rem

网格布局

启动网格布局
    display:grid
    属性值：grid  为块状网格容器 （容器自上而下排列）

划分行和列    
    grid-template-columns:
    grid-template-rows:    
属性值（根据值的个数确定列数）：
固定的数值   100px   100px   100px
百分比      33.33% 33.33%  33.33%

grid-template-areas    划分网格区域     
grid-area            单元格的选择区域
grid-template        简写方式

grid-column-gap         列之间的距离
grid-row-gap         行之间的距离
grid-gap            简写方式

标签：font,适配,布局,设计图,网格,grid,vw,rem,移动
来源： https://blog.csdn.net/skt__/article/details/119351228