css中vw和vh的知识点

引用文档：http://caibaojian.com/vw-vh.html；

http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/；

http://blog.csdn.net/ZNYSYS520/article/details/76053961

周六和同事讨论问题时，突然聊到了vw和vh，今天整理了一下vw和vh的一些小知识点吧，日后可以自己复习的时候看看。

什么是viewport?

视窗的概念在浏览器端指的是浏览器的可视区域；而在移动端则相对复杂，它涉及到3个视口：Layout Viewport(布局视口),Visual Viewport(视觉视口)、Ideal Viewport(虚拟视口),在移动端指的是Layout Viewport

什么是vw，vh，vmax,vmin？

　　vw,vh,vmax,vmin是一种视窗单位，同时也是一种相对单位；它们相对的是视窗（viewport）的大小；单位1，代表相对于视窗大小的1%；

vw:1vw代表视口宽度的1%；

　　 vh:1vh代表视口高度的1%;

　　 vmax:选取vw/vh中最大的一个；

　　 vmin：选取vw/vh中最小的一个；　　　

与百分比%的区别

百分比%相对于其父元素或者其祖先元素的宽度/高度；

　　　vw/vh相对于视窗大小的宽度/高度；vw/vh的优势在于能够直接获取高度，而百分比%则需要在设置body的高度

vmax、vmin的用处

　　　在做移动端开发时，如果使用vw、vh设置字体大小时，在横屏和竖屏情况下是不一样大的；vmax和vmin是当前较大的vw和vh和当前较小的vw和vh，这种情况下，可以设置让字体在横竖屏现实的大小一样。

兼容性

　　　PC端：　　　　

　　 Chrome：自 26 版起就完美支持（2013年2月）

　　 Firefox：自 19 版起就完美支持（2013年1月）

　　 Safari：自 6.1 版起就完美支持（2013年10月）

　　 Opera：自 15 版起就完美支持（2013年7月）

　　 IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）

移动端：

Andriod:自4.4版起就完美支持；

　　　　iOS：自ios8起支持

实例展示:

1、vw和vh的简单示例代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>视窗vw/vh的使用</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html {
 　　　　 font-size: 2vw;
　　　　}
　　　　.container {
　　　　  width: 100vw;
    　　 border: 1px solid #ddd;
　　　　}
　　　　.container .textPart {
　　　　  font-size: 2vw;
　　　　}
　　　　.container img {
　　　　  width: 100vw;
　　　　}
　　　　.colorBox {
　　　　  border: 1px solid #dddddd;
 　　　　 display: flex;
 　　　　 margin-bottom: 10vh;
　　　　}
　　　　.colorBox .redBox {
　　　　  width: 40vw;
　　　　  height: 40vh;
　　　　  background-color: #ee4433;
　　　　}
　　　　.colorBox .blueBox {
　　　　  width: 6vw;
　　　　  height: 60vh;
　　　　  background-color: deepskyblue;
　　　　}
　　　　.colorBox .grayBox {
　　　　  width: 4vw;
　　　　  height: 40vh;
　　　　  background-color: gray;
　　　　}  
   </style>  
</head>

<body>
    <div class="container">
        <img src="http://jdc.jd.com/img/750x340" alt="图片">
        <p class="textPart">
            图片介绍：Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci debitis nobis magni necessitatibus molestias pariatur? Beatae consequuntur fugit amet, unde maiores, eaque a dignissimos, quaerat vero deserunt excepturi dolorum. Tempora?
        </p>
    </div>
    <div class="colorBox">
        <div class="redBox">红色盒子</div>
        <div class="blueBox">蓝色盒子</div>
        <div class="grayBox">灰色盒子</div>
    </div>
    
</body>

</html>

　2、vw、vh、rem的搭配使用实例代码（这样使布局更优化）

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>rem和vw搭配使用</title>
</head>
<body>
<div class="container">
    <img src="http://jdc.jd.com/img/750x340" alt="图片">
    <p class="textPart">
        图片介绍：Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci debitis nobis magni necessitatibus molestias pariatur? Beatae consequuntur fugit amet, unde maiores, eaque a dignissimos, quaerat vero deserunt excepturi dolorum. Tempora?
    </p>
</div>
<div class="colorBox">
    <div class="redBox">红色盒子</div>
    <div class="blueBox">蓝色盒子</div>
    <div class="grayBox">灰色盒子</div>
</div>
</body>
</html>

CSS代码

html {
  font-size: 16px;
}
@media screen and (min-width: 375px) {
  html {
    /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
    font-size: calc(85.8974359%);
    font-size: calc(1.8974359px);
  }
}
@media screen and (min-width: 414px) {
  html {
    /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
    font-size: calc(110.35665529%);
    font-size: calc(15.85665529px);
  }
}
@media screen and (min-width: 600px) {
  html {
    /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
    font-size: calc(120%);
    font-size: calc(15px);
  }
}
@media screen and (min-width: 1000px) {
  html {
    /* 1000px往后是每100像素0.5px增加 */
    font-size: calc(132.1%);
    font-size: calc(16.6px);
  }
}
.container img {
  width: 100%;
  border: 1px solid #ee4433;
}
.container .textPart {
  font-size: 1rem;
}
.colorBox {
  border: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
}
.colorBox .redBox {
  width: 11rem;
  height: 8rem;
  background-color: #ee4433;
}
.colorBox .blueBox {
  width: 6rem;
  height: 8rem;
  background-color: deepskyblue;
}
.colorBox .grayBox {
  width: 4rem;
  height: 8rem;
  background-color: gray;
}

posted @ 2018-03-18 09:05 前端加油站阅读(1776) 评论(0) 编辑收藏举报

刷新页面返回顶部

前端加油站⛽️

css中vw和vh的知识点