移动适配

移动适配

rem

1. 能够使用rem单位设置网页元素的尺寸。可以通过修改html里面的文字大小来改变页面中元素的大小，可以整体控制。

2. rem单位是相对于HTML标签的字体大小计算结果

   1rem = 1HTML字号大小

3. rem移动适配—媒体查询

   能够使用媒体查询设置差异化CSS样式。

   • 写法：

     @media (媒体特性) {
         选择器 {
             css属性
         }
     }
     
     @media (width:320px) {
         html {
             font-size: 32px;
         }
     }
     

vw和vh

• 是相对于单位总是相对于视口来说的。适用于移动端，PC端不适用。

• vw：相对于视口的宽度。

• vh：相对于视口的高度。

• 开发中使用vw，需要把像素大厨的模式改为2x模式。

• 1vw就是当前视口的1/100

  • 1vw是多少像素？ 375px / 100 = 3.75px

  • 开发中使用vw，如何还原设计稿？

    手机屏幕的宽度 * 设计稿中div的宽 / 设计稿的宽度

    例如：100vw * (100 / 375)