网页在移动端的适配中单位的选择

移动端的适配

物理像素和逻辑像素

物理像素：

• 又名设备像素
• 显示器的真实像素

逻辑像素：

• 将设备像素抽象，操作系统为开发者提供

• 例如在100px 在任何的像素屏幕上都能显示一样的大小

• css中使用就是逻辑像素

DPR和PPI

DPR:

• device pixel ratio
• 设备像素比
• 一个逻辑像素真是对应的物理像素
• window.devicePixelRatio获取

PPI:

• Pixel Per Inch
• 每英寸像素

移动端适配

• 自适应
  • 根据不同的设备屏幕自动调整尺寸和大小
• 响应式
  • 随着屏幕的实时变动而自动调整，也是一种自适应

视口 viewport

• 布局视口（layout viewport）
  • 默认980px宽度显示页面
• 视觉视口（visual viewport）
  • 默认980px的视口，在网页中会有右边无法显示出来
  • 在左边可见区域就是视觉视口
• 理想视口（ideal viewport）
  • 开发中为理想视口

meta标签中设置viewport

适配方案

一、rem+动态html的font-size

• 1. 媒体查询方式设置html的font-size
• 2. lib-flexible或者自定义js代码动态设置

• vscode插件px to rem/vw

  • 可以帮助转换

例如屏幕宽度是750px -> font-size设置75px

那么1rem = 75px => 100px = 1.3333rem

二、vw设置

• 现在vw越来越适配
• 完全可以使用vw替代rem
• 1vw等于1/100的屏幕宽度