rem+vw简单适配

rem+vw简单适配

   什么是vw和vh?
   vw : 1vw 等于视口宽度的1%
   vh : 1vh 等于视口高度的1%
   vmin : 选取 vw 和 vh 中最小的那个
   vmax : 选取 vw 和 vh 中最大的那个

1.设置meta标签

    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

2.设置html的font-size大小

html {
  font-size: 13.333333vw;
}

  为什么font-size=13.33333333vw?

  我们的设计稿通常是750px的,屏幕一共是100vw,对应750px,那么1px就是0.1333333vw。同时我们知道rem,rem是相对html元素的字体大小，为了方便计算,我们取html的font-size=100px(这个是可以人为指定的，指定100px，那就是1rem = 100px,如果只从rem考虑就是划分了7.5等份，如果你不取100px,取75px也可以，那就是1rem=75px，750px屏幕划分成了10等份),通过上面的计算结果1px是0.13333333vw,那么100px就是13.333333vw了。

  当我们通过ps测量一个div的大小为 width:300px,height:100px时，我们就可以这样写，ps量出来的像素直接除以100，计算小数很方便

.search-box {
  width: 3rem;
  height: 1rem;
  background-color: pink;
}

  演示效果：

  rem+vw适配解决了小数问题，但是兼容性不太好，所以看大家怎么选择了