相关概念:
1、像素
- 像素:屏幕是由一个一个发光的小点构成,这一个个的小点就是像素
- 物理像素/设备像素:设备能控制显示的最小单位,换句话说就是分辨率,例如1920 x 1080
- CSS像素:抽象的,不存在的,用于逻辑上衡量像素的单位。也就是我们做网页时用到的css像素单位。
- 设备独立像素:可以由程序使用并控制的虚拟像素,可以由相关系统转换为物理像素,包含了CSS像素。在android 机中,css像素不叫 “css像素”,而叫“设备独立像素”。
- 像素密度(PPI):
ppi在120-160之间的手机被归为低密度手机,160-240被归为中密度,240-320被归为高密度,320以上被归为超高密度(Apple给了它一个高大上的名字——Retina) - 设备像素比 DPR:设备像素和设备独立像素的比值,受设备像素密度和缩放比例影响。
2、视口
一般我们所说的视口共包括三种:布局视口、视觉视口和理想视口,它们在屏幕适配中起着非常重要的作用。
2.1 布局视口
当我们以百分比来指定一个元素的大小时,它的计算值是由这个元素的包含块计算而来的。当这个元素是最顶级的元素时,它就是基于布局视口来计算的。
- PC端 布局视口就等于当前浏览器的窗口大小(不包括 borders 、 margins、滚动条)
- 移动端 布局视口大部分默认为980px,这保证 PC的网页可以在手机浏览器上呈现,但是非常小,用户可以手动对网页进行放大。
2.2 视觉视口
- 用户通过屏幕真实看到的区域,默认等于当前浏览器的窗口大小(包括滚动条宽度)。
- 在缩放时,不会改变布局视口的大小,但会改变视觉视口的大小
2.3 理想视口
-
网站页面在移动端展示的理想大小
-
在浏览器调试移动端时页面上给定的像素大小就是理想视口大小,它的单位正是设备独立像素。
-
在移动端开发中,通过meta标签确定布局视口的大小
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width :定义布局视口的宽度,可选值为整数和device-width
initial-scale:定义页面初始缩放比率
width=device-width 使布局视口的宽度=理想视口的宽度
initial-scale=1.0 使理想视口宽度=视觉视口宽度
即三种视口宽度均一致——移动端适配
当缩放比不为1时,布局视口的大小取width和视觉视口宽度的较大值
3、缩放
- 缩放不会影响布局视口和理想视口的大小,会影响视觉视口的大小。
- 缩放比=理想视口的大小/视觉视口的大小,也可以认为是CSS像素/设备独立像素
- 例如,缩放200%,CSS会随着变大,而视觉视口会变小
- 当不缩放时,CSS像素=设备独立像素
4、概念之间的关系
-
设备像素是屏幕生产之后就固定的,而设备独立像素和CSS像素都是虚拟可变的。
-
PC端,未缩放,设备像素比为1,即1个CSS像素=1个设备独立像素=1个设备像素。
-
移动端,根据设备的像素密度,确定设备像素比,即理想视口的大小
-
移动端适配后,1个CSS像素=1个设备独立像素=1个设备像素
5、开发中的布局适配
REM方案:结合VM和根元素的front-size,对移动端元素的大小进行设置
- 确定设备像素比和设备像素
- 在html中设置front-size:100/设备像素*一定倍数
- 利用rem设置元素大小
html{
/*
网页中字体大小最小是12px,不能设置一个比12像素还小的字体
如果我们设置了一个小于12px的字体,则字体自动设置为12
0.1333333vw = 1px
5.3333vw = 40px
*/
font-size: 5.3333vw;
}
.box1{
/*
rem
- 1 rem = 1 html的字体大小
- 1 rem = 40 px(设计图)
*/
width: 18.75rem;
height: 0.875rem;
background-color: #bfa;
}