移动Web——移动适配

移动适配

当屏幕宽度变化了，网页元素的宽高都要等比例变化，而且像间距、像素、字体等都是等比例变化的

 移动适配方案

• rem
• vw

1、谷歌模拟器

2、屏幕分辨率

屏幕分辨率：纵横向上的像素点数，单位是px

pc分辨率：

• 1920*1080
• 1366*768
• …

缩放150%

• 1920 / 150%
• 1080 / 150%

总结

• 硬件分辨率——物理分辨率（出厂设置）
• 缩放调节的分辨率 ---> 逻辑分辨率（软件/驱动设置）

3、视口

• 手机屏幕尺寸不同，网页宽度均为100%
• 网页的宽度和逻辑分辨率尺寸相同

视口：显示HTML网页的区域，用来约束HTML尺寸

width=device-width：视口宽度 = 设备宽度

initial-scale = 1.0：缩放1倍（不缩放） 

4、二倍图

概念：设计稿里面每个元素的尺寸的倍数

作用：防止图片在高分辨率屏幕下模糊失真

• 现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。
• 二倍图设计稿尺寸：750px

5、适配方案

• 宽度适配：宽度自适应
  • 百分比布局
  • Flex布局
• 等比适配：宽高等比缩放
  • rem
  • vw