一、前言：
响应式web设计离不开百分比。但是，css百分比并不是所有的问题的最佳解决方案。css的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口（viewpoint）的宽度或者高度，而不是父元素的，那该怎么办？
二、“vh” & “vw”：
vh：相对于视窗的高度：视窗高度是100vh。
vw：相对于视窗的宽度：视窗宽度是100vw。
视窗的100%高度
（看我！！！）
立即学习“前端免费学习笔记（深入）”；
看我！！！看我…！！！我是浏览器视窗的宽度（你可以通过改变浏览器宽度看我的变化）：0
三、源码：
CSS:
.demo-1,.demo-2,.demo-3{margin-bottom:10px; padding:10px 0; line-height: 30px; color: #fff; text-indent: 10px;} .demo-1 strong,.demo-2 strong,.demo-3 strong{color:#fff !important;} .demo-1{width:10vw; background: #1ab5e3;} .demo-2{width:25vw; background: #FF5F09;} .demo-3{width:50vw; background: #28AF59;} .demo-4{position: fixed; z-index: 10; top: 0; left: 0; width: 150px; height: 100vh; color: #fff; background: rgba(0,0,0,.5);} .demo-4 span{position:absolute; top:50%; display:block; padding: 0 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
登录后复制
HTML:
视窗的10%: 0
视窗的25%: 0
视窗的50%: 0
视窗的100%高度
（看我！！！）看我！！！看我...！！！我是浏览器视窗的宽度（你可以通过改变浏览器宽度看我的变化）：0
登录后复制
JS:
$(function(){ //视窗宽度改变函数 function resizeWindow(){ var viewWidth = window.innerWidth; $('.js-viewWidth').html(viewWidth); $('.js-getVW3').html(viewWidth/2); $('.js-getVW2').html(viewWidth/4); $('.js-getVW1').html(viewWidth/10); } //初始化 resizeWindow(); //浏览器视窗改变时调用上面定义的函数 $(window).resize(function(event) { resizeWindow(); });});
登录后复制
以上就是移动端css单位之 “vh” & “vw”的分别介绍的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2905232.html
