vh搭配vw进行响应式布局

Posted 2021-11-25 wjsy

1.浏览器兼容性: IE8-不支持，ios7.1-不支持，android4.3-不支持

2. vh代表浏览器视口高度（100vh等于当前浏览器的整个高度）

3.vw代表浏览器视口的宽度 （100vw等于当前浏览器的整个宽度）

4.配合浏览器宽度达到不同的字体大小

      div {
          width: 100vw;
          height: 100vh;
          background-color: pink;
      } 
      p {
          /* 以1920为例 默认字体为16 则等于1920/100/16 */
          font-size: 0.83vw
      }