开发知识储备
像素
屏幕上是由一个一个发光的小点构成,这每一个点就是一个像素;分辨率:1920x1080说的就是屏幕中小点的数量。
物理像素
又称设备像素,它的数量是固定的,如上述说的小点就是物理像素,指的是设备屏幕上的像素点个数。
CSS像素
- 编写网页时,我们用的像素都是css像素
- 浏览器在显示像素时,需要将css像素转换为物理像素
- 一个css像素最终由几个物理像素显示由浏览器决定。默认情况下载pc端:一个css像素 = 一个物理像素
视口(viewport)
- 视口就是屏幕中用来显示网页的区域
- 可以通过查看视口的大小,来查看css像素和物理像素的比值
- 可以通过meta标签来设置视口大小
像素比
- 移动端默认的视口大小是980px(css像素),即像素比就是
980/移动端宽度
- 如果直接在网页在编写移动端代码,在980的视口下,像素比会非常不好,导致网页中的内容非常小并且每一款移动设备都有最佳的像素比,只有将像素比设置为该值才能达到最佳效果
- 将像素比设置为最佳像素比的视口大小成为
完美视口
- 将网页的视口设置为完美视口:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
vw单位
- 因为不同设备的视口和像素比不同,所以同样的(如375)像素在不同的设备下意义是不一样的。比如在iponex中就是全屏,在plus中就会缺一块;所以在移动端布局时不能在使用px进行布局
- vw表示的是视口的宽度(viewport width),vw永远相对视口宽度进行计算: 100vw = 一个视口的宽度;1 vw = 1%视口的宽度
- 设计图的宽度:750px , 1125px;以750px为例,用vw作为单位:750px = 100vw,则1px = 0.1333333vw
- rem: 1rem = 1html字体的大小,那么是否通过设置
html{fontsize:0.133333vw}
然后就能使用rem代替px进行移动端布局呢,如10px就设置为1.333vw;答案是不能;
因为网页中字体大小最小是12px,不能设置更小的字体;如果设置了比12px还小的字体,则字体自动设置为12;
解决方法:
所以通常
扩大40倍
,即将font-size设置为5.333vw,此时1rem=5.333vw=40px(设计图)
vw适配
按上述方法设置font-size后,在less中就可以轻松使用rem进行移动端布局了,在设计图中元素大小除以40后以rem为单位即可。
less示例:
//设计图宽度
@tatal-width:750;
.top-bar {
width: (693/40rem);
margin: 0 auto;
}
html {
//设置font-size
font-size: (100vw/@tatal-width)*40;
background-color: #eff0f4;
}