移动端适配方案

1. 移动适配

屏幕发生变化，页面元素的尺寸（宽度和高度）也随之变化，这样可以更好的达到适配效果，用户体验更好
以前的技术无法实现

• 百分比布局特点宽度自适应，高度固定
• Flex布局更多的解决了盒子的排列方式，高度很难适配

解决方案：

• 百分比布局或者flex完成整体元素排列布局
• 配合rem或者vw/vh单位设置元素的尺寸（宽度/高度）最终适配

1.1 rem单位

1. 相对单位
2. rem单位是相对于HTML标签的字号计算结果
3. 1rem = 1HTML字号大小
4. 所以只需要修改html 的文字大小，就可以完成元素大小的等比例缩放

• 手机屏幕大小不同，分辨率不同，如何设置不同的html标签字号？
  媒体查询

媒体查询

能够检测视口的宽度，然后编写差异化的CSS样式
写法：

@media (媒体特性){
   
   选择器 {
   
     CSS属性
   }
}

eg.

@media (width:320px) {
   
   html {
   
      font-size: 32px;
   }
}

rem单位尺寸：

rem单位尺寸 = px单位数值 / 基准根字号