~106完美视口和vw的相关内容

一、完美视口

编写移动端网页时，要写上这串代码

“viewport"表示视口，"device-width"表示最佳视口，”initial -scale"表示初始化缩放

---

二、vw

1、vw单位

1）由于不同设备的视口和像素比不同，所以相同的像素比在不同的设备中意义不同，因此不能使用px进行布局

2）vw表示视口的宽度，1vw=1%视口宽度，100vw=视口宽度

3）常用的设计图的宽度：750px、1125px（以750像素为例）

        100vw=750px，0.1333333333333333vw=1px

2、vw适配

1）rem 1rem=1html字体的大小

2）网页中字体默认最小为12px，不能设置比12px还小的字体

3）结合1）2），我们让 1html字体的大小>12px，即让1html字体的大小>12*0.1333333333333333vw（倍数只要大于12就可以，随意选择）=1rem

4）例子：1rem=1html字体的大小=2.666666666666666vw=20px

若要写宽为40px的网页，则width：2rem;

---