CSS3新vw, vh单位

最新推荐文章于 2025-03-20 10:14:08 发布
最新推荐文章于 2025-03-20 10:14:08 发布
阅读量2w 收藏 9
点赞数 1
分类专栏： CSS html

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


视区相关单位vw, vh..简介以及可实际应用场景

视区相关单位vh, vw截图

“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

移动端vh vw真正的基准度量是layout viewport，也就是meta标签中viewport属性定义的值，默认980px。可以用document.document Element.clientWidth来获取


注：一般情况下，Chrome浏览器浏览器内外宽度是一样的（因为浏览器左右无边框）；加上浏览器大小变小时图片尺寸不渲染的bug，因此，上demo最佳测试浏览器是IE9. 


vm相比%并没有什么优势，vw单位用做宽度自适应的布局，完全是吃力不讨好

vw, vh这两个视区相关动态单位似乎应用前景一下子黯淡了很多，潜力似乎也就那样——想来想去，得出一个结论：vw, vh视区大小相关单位只适用于非定位元素的高度相关属性上！//zxx: 高度相关属性如 – height/min-height/max-height/line-height/padding-top/padding-bottom等



Android4.4之前的版本，目前怕是还是要兼顾的，怎么办？我觉得没有必要为了一个老妪而放弃整个后宫，对于绝大部分设备，我们还是vm + calc哗啦啦地走起，老的设备，我们可以使用以前JS的策略，打个脚本补丁，估计十来行代码，效果都是一样的，CSS代码也完全复用，一点都没必要特异处理，因为老机子不认识vw，所以完全没必要担心新老冲突这样的问题。



一些只能vw, vh才能完成的应用场景：

1. 场景之：元素的尺寸限制

vw vh 主要是实现了动态高度百分比布局，比如宽高比不固定的图片，vw很轻易的实现正方形图片缩略图

原始大图的尺寸限制问题——因为很有可能图片过大，尼玛一屏显示器区域不够放，我们需要对其进行缩放处理。

这类限制的实现，在当下，需要获得图片的原始大小，以及浏览器内部尺寸，算大小，算比例等，算是比较折腾的。

但是，vw, vh等单位本身就是浏览器视区大小相关单位，直接使用其做限制，岂不省了N多JS代码？

CSS代码：
.vw_vh_img {
    max-width: 90vw;
    max-height: 90%;
    max-height: 90vh;
}




HTML代码：


<img src="http://ww3.sinaimg.cn/large/61ecbb3djw1dx4hai2ggnj.jpg" class="vw_vh_img" />









2. CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面</title>
  <meta name="viewport" content="width=device-width,user-scalable=no"/>
  <style>
    /*
    既然vw, vh是视区相关单位，我就想到是不是可以利用这个特性实现精确的视区大小覆盖以及视区边界的定位。
    拿视区覆盖举例，如果我定义一个元素的高宽如下：
    .element {
      width: 100vw;
      height: 100vh;
    }
    然后，再将其定位到视区左上角，岂不是可以实现视区的完整覆盖；我立马想到了弹出框的半透明覆盖层。
    */
    .dialog_container {
      position: fixed; top: 0; left: 0; /* 位到视区左上角 */
      z-index: 10;
      display: none; /* 默认隐藏 */

      width: 100%; /* 为了兼容不支持vw单位的设备, 如: Safari */
      width: 100vw;
      height: 100%;/* 为为了兼容不支持vh单位的设备, 如: Safari */
      height: 100vh;

      background-color: rgba(0,0,0,.25); /* 透明度 */
      text-align: center;
    }
    /*
      理解伪元素 :before 和 :after
      首先要明白一种思想：结构和样式分离。
      1. 结构和样式分离，就意味着：没有样式表，HTML文档也是一个完整的文档；没有样式表，也能正常阅读用HTML表达的所有内容。明白这种思想就能很好理解样式表中使用
      :before 和 :after中的content: ""; 就算没有它们中的content: "", HTML文档也不会受到影响，HTML文档也是一个完整的文档.

      2. 层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。
        伪元素很酷同时也是可应用到实际工作中的，基本上，每一个我们所添加的元素都不会干扰现有的HTML结构，而且伪元素可以做到 几乎所有我们能想到的事情。

      3. 事实上，的确有一些CSS家族的成员（CSS选择器）被分类为伪元素比如：:first-line, :first-letter, ::selection, :before and :after。

      4. 它是做什么的?  简而言之，伪元素将会在内容元素的前后插入额外的元素，因此当我们添加它们时，使用以下的标记方式，他们在技术上是平等的。

      所以，用简单的话来说： :before 和 :after中的content: ""; 不过是对HTML的装潢，使HTML看起来更漂亮一些。举个例子：
      HTML: <a href="#">知道更多</a>
      以上这句语句，是一个链接，点击就能打开，就算没有任何CSS修饰，也不影响打开链接。但是，如果稍微修饰，这个链接就会看起来美观一些：
      a:after { content: "\00A0\000BB"; }  加上CSS修饰后，链接看起来就美观一些

      定义和用法
        :before / :after 选择器在被选元素的内容前面 / 后面 插入内容。
        请使用 content 属性来指定要插入的内容。

      实例
        在每个 <p> 元素的内容之前插入新内容 及 内容的样式：
      p:before {
        content:"台词：-";
        background-color:yellow;
        color:red;
        font-weight:bold;
      }

      关于语法和浏览器支持
      伪元素实际上在CSS1中就存在了，但是我们现在所讨论的:before和:after则发布于CSS2.1中。在最初，伪元素的语法是使用“:”（一个冒号），随着web的发展，在CSS3中修订后的伪元素使用“::”（两个冒号），也就是::before 和 ::after—以区分伪元素和伪类（比如:hover，:active等）
      然而，无论你使用单冒号还是双冒号，浏览器都将能识别它们。由于IE8只支持单冒号的格式，安全起见如果你想要更广泛的浏览器兼容性那么还是使用单冒号的格式吧！
      注释：对于 IE8 及更早版本中的 :before 和 :after，必须声明 <!DOCTYPE>。

    */
    .dialog_container:after {
      display: inline-block;
      content: '';
      width: 0; height: 100%;
      vertical-align: middle;
    }

    .dialog_box {
      position: relative;
      display: inline-block;
      border: 1px solid #ccc;
      text-align: left;
      vertical-align: middle;
    }

    .dialog_title {
      line-height: 28px;
      padding-left: 5px;
      padding-right: 5px;
      border-bottom: 1px solid #ccc;
      background-color: #eee;
      font-size: 12px;
      text-align: left;
    }

    .dialog_close {
      position: absolute;
      top: 5px; right: 5px;
    }

    .dialog_body {
      background-color: #fff;
    }

    .demo_image {
      max-width: 90vw;
      max-height: 90vh;
      -webkit-transition: width .3s;
      -moz-transition: width .3s;
      transition: width .3s;
    }
  </style>
</head>
<body>
  <p style="width:210px; position:relative; z-index:11; background-color:#fff;">
    图片宽度（目前<span id="imageWidth">512</span>像素）：<br/> 128 <input type="range" value="512" min="128" max="1024" step="32"> 1024
  </p>

  <button id="testButton" type="button">点击我出现图片弹框</button>
  <br/>
  <div id="dialogContainer" class="dialog_container">
    <div id="dialogBox" class="dialog_box">
        <div id="dialogTitle" class="dialog_title">尺寸动态可变图片(PIC: 512px*381px)</div>

        <a href="javascript:" id="dialogClose" class="dialog_close">[关闭]</a>
        <div id="dialogBody" class="dialog_body">
        	<img src="images/mm1.jpg" class="demo_image" />
        </div>

    </div>
</div>

<script>
  (function() {
    if (typeof window.screenX === "number") {
      var $ = function(selector) {
          return document.querySelector(selector);
      };

      // 元素们
      var eleWidth = $("#imageWidth"), eleRange = $("input[type='range']"), eleBtn = $("#testButton"),
          eleDialog = $("#dialogContainer");

      eleBtn.addEventListener("click", function() {
        $("#dialogBody img").style.width = eleRange.value + "px";
        eleDialog.style.display = "inline";
      });

      eleRange.addEventListener("click", function() {
        eleWidth.innerHTML = this.value;
        $("#dialogBody img").style.width = this.value + "px";
      });

      $("#dialogClose").addEventListener("click", function() {
        eleDialog.style.display = "none";
        return false;
      });
    }
    else {
      alert("您现在使用的浏览器内力不足，为防止走火入魔，建议使用IE9+或Chrome 20+浏览器~~");
    }

  })();
</script>
</body>
</html>



   
   

    
    


   
   







3. 视区覆盖以及边界定位







拿视区覆盖举例，如果我定义一个元素的高宽如下：


  
  


   
   
.element {
    width: 100vw;
    height: 100vh;
}


  
  



然后，再将其定位到视区左上角，岂不是可以实现视区的完整覆盖；我立马想到了弹出框的半透明覆盖层.建议在Chrome20+浏览器



下查看效果（因为有range控件），点击demo页面按钮，则半透明覆盖层显现了——完整覆盖：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title></title>
    <style>
      body{margin:0;}
      .size {
        font-size: 20px;
      }
      section{ border: dotted 1px #45678E; padding: 5px; margin: 0 10px; }
      h2{ margin:10px 10px 0px 10px;}
      i{ font-size:18px; color:#383293; }

      html {
        /* iPhone6的375px尺寸作为16px基准，600px正好18px大小 */
        font-size: calc(100% + 2 * (100vw - 375px) / 225);
      }
      @media screen and (min-width: 600px) {
        html {
          /* 600px-1000px每100像素宽字体增加1px(18px-22px) */
          font-size: calc(112.5% + 4 * (100vw - 600px) / 400);
        }
      }
      @media screen and (min-width: 1000px) {
        html {
          /* 1000px往后是每100像素0.5px增加 */
          font-size: calc(137.5% + 5 * (100vw - 1000px) / 1000);
        }
      }

      /* 固定窗口下方并居中的条 */
      .vh_bar {
        position: fixed;
        top: 100%;
        top: 100vh;
        left: 5%;
        left: 5vw;
        right: 5%;
        right: 5vw;

        height: 30px; line-height: 30px;
        margin-top: -30px;
        background-color: #eee;
        border: 1px solid #ccc;
        box-shadow: inset 0 1px #fff;
        box-sizing: border-box;
        text-align: center;
        font-size:18px;
      }
    </style>
</head>
<body>
  <div><h3>以下字体变化需要 变换浏览器窗口有字号的变化</h3></div>
  <h2>VW size <i id="i1"></i></h2>
  <section id="section1">
    <div>ABCDEFGHIJKLMN</div>
    <div>一二三四五六七八九十零</div>
  </section>

  <h2>normal size <i id="i2"></i></h2>
  <section id="section2">
    <div class="size">ABCDEFGHIJKLMN</div>
    <div class="size">一二三四五六七八九十零</div>
  </section>

  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <div class="vh_bar">各个浏览器测试效果是一模一样的，固定在视区底部，不随滚动条滚动的空白工具栏</div>
</body>
</html>
<script type="text/javascript">
  function toSize(){
    var i1 = document.querySelector('#i1'),
        i2 = document.querySelector('#i2'),
        s1 = document.querySelector('#section1'),
        s2 = document.querySelector('#section2');

    i1.innerHTML = s1.querySelector('div').style.fontSize;
    i2.innerHTML = s2.querySelector('div').style.fontSize;

    var obj1 = s1.querySelectorAll('div')[0];
    i1.innerHTML = '[font-size:' + new mCss(obj1).GetCss('fontSize') + ']';
    var obj2 = s2.querySelectorAll('div')[0];
    i2.innerHTML = '[font-size:' + new mCss(obj2).GetCss('fontSize') + ']';

  	// var oHtml = document.getElementById("html");
  	// var iW= oHtml.getBoundingClientRect().width;//oHtml.clientWidth;
  	// iW= iW>540 ? 540 : iW;
  	// oHtml.style.fontSize=iW/16+"px";
  }

  function mCss(obj){
    this.obj = obj;
  }
  mCss.prototype.GetCss = function(key){
    if(typeof this.obj.currentStyle!='undefined'){
      return parseFloat(this.obj.currentStyle[key]);//IE
    }
    else {
      return (getComputedStyle(this.obj)[key]);
    }
  }

  window.addEventListener("resize",function(){ toSize();},false);
  window.addEventListener("orientationchange",function(){ toSize();},false);
</script>









3. 场景之：Office Word效果

我们可以把web页面做得像Office文档那样，一屏正好一页；拖动滚动条，我们可以一直往下看到最后一页。
如果只借助CSS，这种效果绝对定位是实现不了的。因为其top值是动态的(100%, 200%, 300% …)，必须借助JavaScript才能实现。而使用vh单位，既能捕获浏览器可视区域高度，又不脱离文档流，真是实现Office Word效果最佳利器！

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8"/>
  <title></title>
  <meta name="viewport" content="width=device-width, user-scalable=no"/>
  <style>
    body {
      background-color: #789BC9;
    }

    page {
      display: block;
      height: 98vh;
      width: 69.3vh;
      margin: 1vh auto;
      padding: 12vh;
      border: 1px solid #646464;
      box-shadow: 0 0 15px rgba(0,0,0,.75);
      box-sizing: border-box;
      background: url(images/office/bl.png) no-repeat 8vh 88vh,
        url(images/office/br.png) no-repeat 59vh 88vh,
        url(images/office/tl.png) no-repeat 8vh 8vh,
        url(images/office/tr.png) no-repeat 59vh 8vh;
      background-color: white;
      position: relative;
    }
    /* 页码 样式 */
    page:after {
      content: attr(data-page);
      color: graytext;
      font-size: 12px;
      text-align: center;
      bottom: 4vh;
      position: absolute;
      left: 10vh;
      right: 10vh;
    }

  </style>
</head>
<body>
  <page>
    <ol>
    <li>本demo应用诸多CSS3属性，部分HTML特性，以及高级点的JavaScript API.</li>
    <li>demo页面的宽高按照标准纸张的21:29.7的比例制定，因此，所有单位值都是使用的vh单位。</li>
    <li>本demo <page>元素还可以设置float:left或inline-block两端/居中对齐等，让一屏的水平方向显示多个page页面，
      就如实际的office word一样。</li>
    </ol>
  </page>
  <page></page>
  <page></page>

  <script>
    (function() {
      if (typeof window.screenX === "number") {
        var elePages = document.querySelectorAll("page"), lenPage = elePages.length;
        for (var i=0; i<lenPage; i+=1) {
          elePages[i].setAttribute("data-page", "第 "+ (i+1) +" 页，共 "+ lenPage +" 页");
        }
      }
      else {
        alert("浏览器太老了！");
      }
    })();

  </script>
</body>
</html>



   
   
  1. 本demo应用诸多CSS3属性，部分HTML特性，以及高级点的JavaScript API.
  2. demo页面的宽高按照标准纸张的21:29.7的比例制定，因此，所有单位值都是使用的vh单位。
  3. 本demo <page>元素还可以设置float:left或inline-block两端/居中对齐等，让一屏的水平方向显示多个page页面，就如实际的office word一样。







4. 水平居中布局与滚动条跳动



绝大多数的页面间布局都是水平居中布局，主体定个宽度，然后margin: 0 auto;




例如，妇女之友大淘宝的首页：

淘宝首页的居中布局





然而，这种布局有一个存在一个影响用户体验的隐患。应该都知道，现代浏览器滚动条默认是overflow:auto类型的，也就是如果尺寸不足一屏，没有滚动条；超出，出现滚动条。于是，问题来了：





信息流页面，如新浪微博，是从上往下push渲染的。开始只有头部一些信息加载，此时页面高度有限，没有滚动条；然后，更多内容显示，滚动条出现，占据可用宽度，margin: 0 auto主体元素自然会做偏移——跳动产生。

JS交互，本来默认页面高度不足一屏，结果点击了个“加载更多”，内容超过一屏，滚动条出现，页面主体就会左侧跳动。

结构类似几个页面通过头部的水平导航刷新切换，结果有的页面有滚动条，有的没有。造成的结果就是，导航尼玛怎么跳来跳去！

当前优化这种体验问题，一般有两种解决方法：





高度尺寸不确定的，例如，新浪微博，使用：

body { overflow-y: scroll; }

新浪微博处理滚动跳动问题方法





高度确定的，例如淘宝网首页。使用CSS把页面尺寸布局骨架搭好，再在里面吐数据。于是，要么没有滚动条，要么滚动条直接出现。不会出现跳动。




CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动。






<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>页面出现滚动条的时候没有跳动晃动</title>
    <style>
	/*
	更新于2016年9月28日
	经过一些列项目实践，关于浏览器出现滚动条和消失页面不滚动有了更加终极的解决方案，经过大型项目实践已经验证相当具有可行性，这里特意分享下：
	*/
	/*
	html {overflow-y: scroll;}
	:root {
	  overflow-y: auto;
	  overflow-x: hidden;
	}

	:root body {position: absolute;}
	body {
	  width: 100vw;
	  overflow: hidden;
	}*/

	body{background:#a0b3d6; font-size:87.5%; margin:0; line-height:1.5; color:#333; font-family:Arial, sans-serif;}
	#content { min-height: inherit; }
	/* 跳晃 的标题文字 */
	.demo {
		margin-left: -webkit-calc(100vw - 100%);
		margin-left: calc(100vw - 100%);
		text-align: center; overflow: hidden;
		-webkit-animation: scrollbar-toggle 4s infinite alternate;
		animation: scrollbar-toggle 4s infinite alternate;
	}
	.demo p{ font-size:28px;}
	@-webkit-keyframes scrollbar-toggle {from{height: 0vh;}to{height: 50vh;}}
	@keyframes scrollbar-toggle {from{height: 0vh;}to{height: 50vh;}}

	#main{width:100%; background:#beceeb; overflow:hidden;}
	#main h1{line-height:40px; margin:0; text-align:center; font-size:38px; background:#c1d5eb; font-family:'kaiti','microsoft yahei'; text-shadow:0px 1px 0px #f2f2f2;}
	#body{padding:0; overflow:hidden;}
	#body .part{width:50%; min-height:500px; _height:500px; background:white;}

       	#code{float:left; margin-left:-1px; margin-bottom:-999em; padding-bottom:999em;}
 
#body h3{



          line-height:30px; margin:0; font-size:15px; background:#f0f3f9; padding-left:10px; 
          border-bottom:1px solid #ededed; 
          color:#4e4e4e; 
          text-shadow:0px 1px 0px white; 
          font-family: 'microsoft yahei';
        } 
    </style>
</head>
<body>
  <div id="main"> 
    <h1>页面出现滚动条的时候没有跳动晃动实例页面</h1>
    <div id="body" class="light">
      <div id="content" class="show">
        <h3>展示</h3> 
        <div class="demo"> 
          <p>我不像标题，我是一个不会晃动的安静的小天使！</p> 
          <img src="images/mm1.jpg" /> 
        </div> 
        <h3>代码</h3> <h5>CSS代码：</h5> 
        <pre name="code" class="DlHighlight css"> 
          .demo { 
            margin-left: -webkit-calc(100vw - 100%); 
            margin-left: calc(100vw - 100%); 
            text-align: center; 
            overflow: hidden; 
            -webkit-animation: scrollbar-toggle 20s infinite alternate; 
            animation: scrollbar-toggle 20s infinite alternate; 
          } 
          @-webkit-keyframes scrollbar-toggle {from{height: 0vh;}to{height: 80vh;}} 
          @keyframes scrollbar-toggle {from{height: 0vh;}to{height: 80vh;}}
        </pre> 
      </div> 
    </div> 
  </div>
</body>
</html>




































                

        

    

  



    


                



	

		

			

				
					
CSS3中的vw和vh单位 - 编程指南

				
			

			

				

					2301_79326559的博客
				

				

					09-23
					
					368
					
				

			

		

		

			
				
在CSS3中，vw和vh单位提供了一种相对于浏览器视窗大小的百分比单位。它们可以用于创建响应式的布局和样式，使得元素的大小可以根据视窗尺寸自动调整。通过使用vw和vh单位，我们可以更轻松地开发适应不同屏幕大小的网页。希望本文对你理解vw和vh单位有所帮助！

			
		

	



                

            
              



	

		

			

				
					
CSS3中vh

				
			

			

				

					juzipchy的博客
				

				

					05-15
					
					719
					
				

			

		

		

			
				
vh 
说明： 
相对于视口的高度。视口被均分为100单位的vh. 
示例代码：h1 {
    font-size: 8vh;
}如果视口的高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100实例：<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></ti

			
		

	



              


  
              

                


	

		

			

				
					
CSS中height使用100%和100vh的区别

					
最新发布

				
			

			

				

					810cheng
				

				

					03-20
					
					672
					
				

			

		

		

			
				
css中height使用100%和100vh的区别

			
		

	





	

		

			

				
					
css3自适应布局单位vw,vh详解

				
			

			

				

					qq_36453396的博客
				

				

					09-18
					
					860
					
				

			

		

		

			
				
视口单位(Viewport units)

什么是视口？

在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。

视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport,“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight..

			
		

	



		

			
		



	

		

			

				
					
vw  vh

				
			

			

				

					qq_40774743的博客
				

				

					08-23
					
					477
					
				

			

		

		

			
				
1，vw、vh、vmin、vmax 的含义

（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。

视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

 

（2）具体描述如下：

vw：视窗宽度的百分比（1vw 代表...

			
		

	





	

		

			

				
					
css3自适应单位vw,vh详解

				
			

			

				

					夏天的博客
				

				

					02-02
					
					1943
					
				

			

		

		

			
				
在CSS3中，新增了很多长度单位，今天就来谈谈： vw、vh、vmin、vmax

1.什么是视口？
在客户端，视口指的是浏览器的可视区域；
而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。指的就是Layout Viewport, “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小.

			
		

	





	

		

			

				
					
css3新单位vw、vh的使用教程

				
			

			

				

					09-24
				

			

		

		

			
				
CSS3新引入的视口单位vw和vh，提供了相对于视口尺寸的长度单位，它们表示视口（Viewport）宽高的百分比。其中，1vw等于视口宽度的1%，1vh等于视口高度的1%。这样，设计师和开发者就可以直接用视口大小来定义元素的...

			
		

	





	

		

			

				
					
纯css3使用vw和vh实现自适应的方法

				
			

			

				

					09-24
				

			

		

		

			
				
CSS3引入了一种新的解决方案，即使用`vw`和`vh`单位，来简化响应式设计的实现过程。`vw`和`vh`单位基于视口的尺寸，提供了更直观的方式来定义元素的尺寸，从而实现真正的跨设备自适应。  **视口单位的理解**  视口...

			
		

	





	

		

			

				
					
浅谈css3新单位vw、vh、vmin、vmax的使用详解

				
			

			

				

					09-24
				

			

		

		

			
				
CSS3中的视窗单位vw、vh、vmin和vmax为现代网页设计提供了更灵活的布局方式，尤其在响应式设计中发挥着重要作用。这些单位允许开发者基于浏览器的视窗大小来定义元素的尺寸，而不是依赖于父元素或固定像素值。  1. *...

			
		

	





	

		

			

				
					
CSS 中px、em、rem、%、vw、vh单位之间的区别详解

				
			

			

				

					11-21
				

			

		

		

			
				
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。  1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...

			
		

	





	

		

			

				
					
CSS3 - 新单位vw、vh、vmin、vmax使用详解（附样例)

				
			

			

				

					qq_43248623的博客
				

				

					08-27
					
					3840
					
				

			

		

		

			
				
像 px、em 这样的长度单位大家肯定都很熟悉，前者为绝对单位，后者为相对单位。CSS3 又引入了新单位：vw、vh、vmin、vmax。下面对它们做个详细介绍。
一、基本说明
1，vw、vh、vmin、vmax 的含义
     （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。
视窗(Viewport)是你的浏览器实际显示内容的区

			
		

	





	

		

			

				
					
css vw vh ie9,GitHub - saabi/vminpoly: A polyfill for CSS units vw, vh & vmin and now some media que...

				
			

			

				

					weixin_29074409的博客
				

				

					08-04
					
					212
					
				

			

		

		

			
				
vminpolyA polyfill for CSS units vw, vh & vmin.Simple online demo right here. A more sophisticated responsive demo demonstrating vw/vh/vmin units along with media queries, working right down to IE...

			
		

	





	

		

			

				
					
css3中calc、vw、vh、vmin、vmax 属性的应用及兼容性

				
			

			

				

					zyoungw
				

				

					06-30
					
					2万+
					
				

			

		

		

			
				
一、 calc()的使用什么是calc()?calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc...

			
		

	





	

		

			

				
					
CSS---CSS3新增的vw vh单位

				
			

			

				

					前端与计算机相关知识的分享，博主的qq523235674
				

				

					02-15
					
					1663
					
				

			

		

		

			
				
CSS3中新增了一种视口单位 vw和vh，何谓视口，就是根据你浏览器窗口的大小的单位，不受父元素影响。


在移动端，视口单位相对于布局视口。


1vw=可视窗口宽度的百分之一，比如窗口宽度是750，则1vw = 7.5px·

1vh =可视窗口高度的百分之一，比如窗口高度是667，则1vh = 6.67px

使用它唯一需要注意的就是它的兼容性:
①在PC端已兼容到IE9


②在移动端iOS 8以上以及Android 4.4以上获得支持，并且在微信×5内核中也得到完美的全面支持Vue本身都只兼容到.

			
		

	





	

		

			

				
					
bug 记录 - 安卓移动端高度使用 100vh 的坑

				
			

			

				

					神膘护体小月半的博客
				

				

					11-21
					
					1944
					
				

			

		

		

			
				
bug 记录 - 安卓移动端高度使用 100vh 的坑

			
		

	





	

		

			

				
					
css3新单位vw、vh、vmin、vmax的使用详解（附样例）

				
			

			

				

					JoeBlackZQQ的专栏
				

				

					08-23
					
					2401
					
				

			

		

		

			
				
From: http://www.hangge.com/blog/cache/detail_1715.html

像 px、em 这样的长度单位大家肯定都很熟悉，前者为绝对单位，后者为相对单位。CSS3 又引入了新单位：vw、vh、vmin、vmax。下面对它们做个详细介绍。

 

一、基本说明

1，vw、vh、vmin、vmax 的含义

（1）vw、vh、vmin、vmax 是一种视窗单位...

			
		

	





	

		

			

				
					
CSS 垂直居中的正确打开方式

				
			

			

				

					2401_84094868的博客
				

				

					04-12
					
					945
					
				

			

		

		

			
				
点击这里即可获取，包括答案解析。转存中…(img-RjlsuFeB-1712869449107)][外链图片转存中…(img-hc9WZQXl-1712869449107)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-S0gvHlT0-1712869449107)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

			
		

	





	

		

			

				
					
css3新单位vw、vh、vmin、vmax的使用详解

					
热门推荐

				
			

			

				

					moyan的博客
				

				

					07-25
					
					8万+
					
				

			

		

		

			
				
1，vw、vh、vmin、vmax 的含义

（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。

视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。




（2）具体描述如下：


vw：视窗

			
		

	





	

		

			

				
					
css3新单位vw、vh、vmin、vmax深度解析与应用实例

				
			

			

				

					
				

			

		

		

			
				
本文将详细介绍CSS3中的四个新单位vw、vh、vmin和vmax，这些单位是视窗单位，与传统的百分比单位有显著区别。vw表示视窗宽度的1%，vh则是视窗高度的1%，vmin取两者中的最小值，vmax取两者中的最大值。它们与百分比的...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值