移动端适配(物理像素、css像素、设备独立像素)

1. 像素

• css 像素
  • a. 虚拟像素
  • b. 用于开发中设置元素的样式
  • c. 疑问： 开发中编写的css 像素如何落地？？？
• 设备独立像素
  • a. 虚拟像素
  • b. 1 设备独立像素 === 1 css 像素
  • c. 1 设备独立像素 = N 个物理像素
• 物理像素
  • a. 屏幕的分辨率
  • b. 是设备上控制现实的最小单元
  • c. iphone6：750 * 1334
  • d. 真实存在的像素
• 设备像素比 dpr
  • a. 物理像素 / 设备独立像素 = dpr
  • b. iphone6：2
  • c. 常见的 dpr：2 || 3

2. 视口

1. 移动端视口
   1. 布局视口
      1. 网页的宽度， 默认980px
   2. 视觉视口
      1. 移动端设备可见屏幕大小
2. 场景： 不做任何处理
   1. 布局视口大于视觉视口， 会出现滚动条
   2. 如果不想要滚动条，需要压缩页面，将980的网页挤压到小于980的屏幕里
      1. 问题： 元素太小，无法看清
      2. 解决方案： 理想视口(完美视口)
3. 理想视口
   1. 布局视口 == 视觉视口
   2. 实现： meta name = viewport width=device-width
   3. 问题： 不能适用于所有机型
   4. 解决方案：适配

3. 适配

3.1 适配方案

1. viewport适配
2. rem适配
3. vw适配

3.1.1. viewport 适配核心思想

1.让网页宽度等于设计稿宽度

优点：所见即所写，设计稿上元素尺寸的多少，就可以写多少

缺点：网页上所有的内容都会被适配，包括字体、图片等。容易造成图片失真、字体模糊。

3.1.2. px，em，rem 的区别

em：基于父元素的字体大小

1.如果父元素没有设置字体大小，会自动向外层，直到找到 body 字体大小

2.如果父元素设置字体大小，当前子元素(字体大小)的 em 会继承父元素的字体大小

3.子元素如果设置 width，height，margin，padding 使用 em，相对于自身的字体大小

3.2 rem适配

1. 方案一：
   1. 将rem的值设置100px
   2. 计算公式：设计稿元素尺寸 / 设计稿的尺寸 === 编写元素的尺寸 / 设备的宽度
   3. 特点：每次都需要当前设备的宽度参与计算
2. 方案二：
   1. 将设备的宽度以及设计稿的宽度都等分10份
   2. 设备上的1rem = 1 / 10 设备宽度
   3. 设计稿上的1rem = 1 /10 设计稿宽度
   4. 优点：
      1. 不需要关心设备屏幕的大小
      2. 只需要关心设计稿上元素尺寸所占的设计稿的rem值是多少

3.3 vw适配

vw 就是把视口分为 100 等分，一份就相当于 1%

优点：使用非常方便

缺点：当比例为小数时无法精确计算，如：1.3333%

不使用 vh 的原因是，如果同一个屏幕的宽度不同，高度相同，但是高度占比还是相同的，不能适配。