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. 视口
- 移动端视口
- 布局视口
- 网页的宽度, 默认980px
- 视觉视口
- 移动端设备可见屏幕大小
- 布局视口
- 场景: 不做任何处理
- 布局视口大于视觉视口, 会出现滚动条
- 如果不想要滚动条,需要压缩页面,将980的网页挤压到小于980的屏幕里
- 问题: 元素太小,无法看清
- 解决方案: 理想视口(完美视口)
- 理想视口
- 布局视口 == 视觉视口
- 实现: meta name = viewport width=device-width
- 问题: 不能适用于所有机型
- 解决方案:适配
3. 适配
3.1 适配方案
- viewport适配
- rem适配
- 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适配
- 方案一:
- 将rem的值设置100px
- 计算公式:设计稿元素尺寸 / 设计稿的尺寸 === 编写元素的尺寸 / 设备的宽度
- 特点:每次都需要当前设备的宽度参与计算
- 方案二:
- 将设备的宽度以及设计稿的宽度都等分10份
- 设备上的1rem = 1 / 10 设备宽度
- 设计稿上的1rem = 1 /10 设计稿宽度
- 优点:
- 不需要关心设备屏幕的大小
- 只需要关心设计稿上元素尺寸所占的设计稿的rem值是多少
3.3 vw适配
vw 就是把视口分为 100 等分,一份就相当于 1%
优点:使用非常方便
缺点:当比例为小数时无法精确计算,如:1.3333%
不使用 vh 的原因是,如果同一个屏幕的宽度不同,高度相同,但是高度占比还是相同的,不能适配。