码迷,mamicode.com
首页 > 其他好文 > 详细

vh搭配vw进行响应式布局

时间:2019-04-02 11:04:50      阅读:481      评论:0      收藏:0      [点我收藏+]

标签:字体   and   等于   不同的   响应式布局   兼容   style   div   布局   

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进行响应式布局

标签:字体   and   等于   不同的   响应式布局   兼容   style   div   布局   

原文地址:https://www.cnblogs.com/wjsy/p/10640833.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!