22-移动端布局方式-rem

移动端布局rem

一、移动端布局需要进行计算适配

根据移动端的计算公式：dpr=物理像素/逻辑像素

1. dpr 设备像素比，常见的值有几款计算得到的
2. 物理像素 UI设计师给的设计图大小
3. 逻辑像素 前端开发需要设置的css样式

根据以上分析，需要计算逻辑像素，所以可以推导公式

得到：逻辑像素 = 物理像素 / dpr

二、关于dpr的推算

设备和css的比例

1. 常见的设计图宽度为640px，在终端中测试时候需要用320px的终端，得到的dpr的比例是2
2. 常见的设计图宽度为750px，在终端中测试时候需要用375px的终端，得到的dpr的比例是2
3. 常见的设计图宽度为1080px，在终端中测试时候需要用414px的终端，得到的dpr的比例是3

总结：在工作中UI提供的设计图一定是750px的，dpr的值就是2

三、推算移动端布局公式

1. 逻辑像素 = 物理像素 / dpr

2. 案例：设计图宽度是640px，设计图头部的导航高度是88px，在css中需要设置的高度是多少？

   ​ 88px / 2 = 44px

3. 44px在每一个移动端中都是一个绝对值，不会进行改变做到适配

4. 我们需要将44px转换为一个可以根据移动端屏幕大小进行改变的值

四、移动端布局单位 rem

rem是相对于根元素html计算的单位

1. 在网页中有个盒子宽度大小是2rem，盒子的大小应该是 2*16px
2. 88px / 2 = 44px，根元素默认是16px，44px => 2.75rem

五、关于移动端布局rem方式的总结

1. 原理：需要媒体查询去设置常见的终端下面的font-size的值，rem单位会自动相对于根元素计算

2. 写法：

   • 常见的小屏手机：

     @media all and (max-width:320px){
         html{
             font-size:12px
         }
     }
     

   • 常见的中屏手机：

     @media all and (min-width:321px) and (max-width:375px){
         html{
             font-size:14px
         }
     }
     

   • 常见的大屏手机：

     @media all and (min-width:376px) and (max-width:414px){
         html{
             font-size:16px
         }
     }
     

   • 常见的超大屏手机：

     @media all and (min-width:415px){
         html{
             font-size:18px
         }
     }
     

3. 计算

   • 物理像素 / dpr = 逻辑像素Q（单位是px）
   • Qpx => Qrem
   • Q/相对应的font-size的值即可