vh搭配vw进行响应式布局

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
      }  

 

你可能感兴趣的:(vh搭配vw进行响应式布局)