【前端学习笔记】14-移动端入门之VW适配

开发知识储备

像素

屏幕上是由一个一个发光的小点构成，这每一个点就是一个像素；分辨率：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;
}