语雀内容

在PC端，一个css像素等于一个物理像素
在移动端，物理像素变小，所以一个css像素要对应多个物理像素

vw

表示视口

  • 1vw = 1%视口宽度
  • 100vw = 视口宽度

vw和%的区别

%单位是参考包含块来计算的
vw总是相对于视口计算的

vw适配

vw网页用的
0-100vw

px设计用的
0-750px

设计转网页的原因是单位不一样

750像素宽的设计图，使用vw表示其中的60像素

  • 100vw（物理像素）— > 750px（设计图的物理像素）

  • 100vw（css像素）—> 375px（视口css像素）

  • 1px （设计图上的物理像素）—> 0.13333vw

  • 0.5px（css像素） —> 0.13333vw

  • 60px —> 8vw

100/750*60 = 8vw

但是每次这样算比较麻烦

所以设置HTML的fontsize，这样每个元素长度都相对于fontsize计算即可

网页编译字体大小最小为12px

100vw / 750 40*的目的就是让font-size的值大于12px，也可以乘以30，50

750px设计图时，设置font-size为5.33333vw = 40px

  1.  html{
  2.    /* 1rem=40px */
  3.    font-size: 5.33333vw;
  4. }

要表示的宽度/40就是页面的大小
比如表示60px，那么width就等于1.5rem

rem适配