在css中，vw是一个长度单位，一个视口单位，是指相对于视口的宽度；视口会被均分为100单位的vw，则1vw等于视口宽度的1%，比如浏览器的宽度为1920px，则“1vw=1920px/100=19.2px”。
 

 
(推荐教程：CSS视频教程)
 
视口单位(Viewport units)
 
什么是视口？
 
在PC端，视口指的是在PC端，指的是浏览器的可视区域；
 
而在移动端，它涉及3个视口：Layout Viewport(布局视口)，Visual Viewport(视觉视口)，Ideal Viewport(理想视口)。
 
视口单位中的“视口”，PC端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。
 
根据CSS3规范，视口单位主要包括以下4个：
 
1.vw：相对于视口的宽度， 视口被均分为 100 单位的vw，1vw等于视口宽度的1%。
 
2.vh：相对于视口的宽度， 视口被均分为 100 单位的vh，1vh等于视口高度的1%。
 
3.vmin：选取vw和vh中最小的那个。
 
4.vmax：选取vw和vh中最大的那个。
 
vw 和 vh
 
全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于屏幕宽度和高度的 1%。
 
vh and vw：相对于视口的高度和宽度，而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。
 
比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。
 
vh/vw与%区别
 

 
代码：
 
body{background-color:orange;}
 
.p{width:50vw;height:50vh;background-color:pink;fontsize:3em;}
 
P 标签的宽度为 50vw
 
效果：
 

 
说明：
 
1 个 vw 相当于页面宽度的 1%，比如页面宽度是 1000px，那么 1vw
 
就是 10px，vh 同理。
 
P 标签的宽度是 50vw，所以就是页面宽度的 50%，高度是 50vh，所以就
 
是页面高度的 50%。
 
更多编程相关知识，请访问：编程学习！！

 
vw单位
 
vw是css的一个属性，和px，rem等类似，属于长度单位。
 
在浏览器中， 1 vw = viewport 的宽度 /100
 
根据这个特性，vw 可以帮助我们实现移动端自适应布局，其优点在于所见即所得，甚至优于rem，因为完全不用使用额外的计算。
 
推荐和sass、less这种css预处理语言一起使用，因为其可以定义变量及函数，会在使用vw上提供巨大帮助。
 
@vv:7.5vw;
 
.circle{
 
width: 100/@vv;
 
height: 100/@vv;
 
border: 1px solid red;
 
border-radius: 50%;
 
font-size: 16/@vv;
 
text-align: center;
 
line-height: 100/@vv;
 
}
 
header.clear{
 
width: 100%;
 
height: 80/@vv;
 
font-size: 42/@vv;
 
background: #ededed;
 
line-height: 80/@vv;
 
text-align: center;
 
}
vw布局练习
 
这是header
 

  
circle
 
 
下面三张图分别是在iphone 6|7|8 和ihone 6P|7P|8P 以及ipad Pro中的表现
 

 
image
 

 
image
 

 
image
 
原理
 
以设计稿为750为例，假设viewport代表窗口宽度
 
750 => viewport
 
7.5 => viewport/100
 
//得到
 
1vw => 7.5
 
// 元素list 宽为300px
 
300 => 300/7.5 vw
 
//得到
 
@vv = 7.5vw
 
300 => 300/@vv

这周在逆战班学习了弹性布局，网格布局，以及移动端布局和响应式布局等。其中在移动布局有两种方案，流式布局和rem布局，这里我讲的vw以及vw单位就是与rem布局息息相关的。
那么它们之间有什么关系，vw和vw单位究竟是什么呢？
rem布局是移动端布局的非常常见的一种方案，很多大网站也都采用了这种方案，它的好处就是这种布局方式做出的页面可以很好的适配各种型号的手机设备，在不同的分辨率下等比放大，始终给用户很协调的感觉。
这里展示下效果图：
 
（
 这是在iphone6/7/8下面的效果。
 再看下图：
 （图2）
 这是iPad下的效果。为了对比明显我并没有选择iPhone plus，我们可以在上方看到分辨率的对比，iPad的分辨率比iPhone6多出一倍多，但是界面依然很好的展示出来了，仔细观察四周的间隙并没有变，整体还是非常协调，与此同时我们也可以明显的看出此时屏幕所能显示内容变少了，这也就是他的缺点。那么rem布局究竟如何实现的呢？
 
1.rem
 
rem事实上就是一个相对单位，在之前我们学习过em这个单位，它就是相对于父元素或者当前元素的font-size值的，1em1个font-size的大小，而rem其实也是相对font-size的，不同的是它是相对根元素的font-size的，1rem1个根元素的font-size。利用rem的这个特性就可以实现rem布局了。
 先给html的font-size设置一个固定值，通常设置100px就可以了，因为好计算，在网页中我们一般不要让字体## 标题大小小于12px，然后1rem就等于100px，这样转换下来rem页面就可以实现了。
 这里展示下一个简单的案例：
 首先还是照常写下html结构：
 
 
 菜谱推荐 
 
 
  
 
 
  
 
 
  
 
三餐推荐
 
  
 
食物库
 
 
 
 
精品好菜
 
 
 
   
  

   金枪鱼的幻想曲
  
 
    
  

   早餐的诱惑
  
 
    
  

   进击的鸡小胸
  
 
 
 
 
 
 
主页 
 
食谱 
 + 
 
发现 
 
我的 

结构写完接着是css样式：
 /* css reset */
 
*{margin: 0;padding: 0;}
 img{display: block;}
 a{text-decoration: none;}
 
/* css common */
 html{font-size: 100px;}
 body{font-size: 0.16rem;}
 
/* css header */
 #header{height: 0.44rem;background: #02D1C5;}
 #header span{font-size: 0.18rem;color: #FEFEFE;text-align: center;line-height: 0.44rem;display: block;}
 
/* css search */
 
#search{width: 2.5rem;height: 0.25rem;background: #F3F3F3;margin: 0.2rem 0.61rem 0.21rem 0.64rem;display: flex;}
 #search input{width: 2.19rem;height: 100%;border: none;background: none;}
 #search span{width: 0.17rem; margin-left: 0.1rem;margin-right: 0.04rem;display: block;margin-top: 0.02rem;}
 
/* css banner */
 
#banner{width: 100%;height: 1.5rem;}
 #banner img{width: 100%;height: 100%;}
 
/* css nav */
 
#nav{width: 100%;height: 0.88rem;display: flex;justify-content: space-evenly;align-items: center;}
 #nav a p{width: 1.65rem;height: 0.5rem; border-radius: 0.02rem;box-shadow: 0.02rem 0.02rem 0.1rem 0.02rem #cccccc;text-align: center;line-height: 0.5rem;color: #02D1C5;}
 #nav a p span{font-size: 0.25rem;margin-right: 0.17rem;}
 
/* css main */
 
#main{margin-bottom: 0.7rem;}
 #main h3{font-size: 0.16rem;color: #666666;margin-left: 0.49rem;margin-bottom: 0.1rem;}
 #main div{width: 3.45rem;margin: 0 auto;}
 #main div a{display: block;width: 3.45rem;height: 1.25rem;margin-bottom: 0.15rem;position: relative;}
 #main div a img{width: 100%;height: 100%;}
 #main div a div{width: 100%;height: 100%; position: absolute;left: 0;top: 0;background: rgba(83,83,83,.5);text-align: center;line-height: 1.25rem;font-size: 0.2rem;color: white;border-radius: 0.2rem;}
 
/* css footer */
 #footer{width: 100%; height: 0.5rem;display: flex;justify-content: space-around;background: white;position: fixed;bottom: -0.01rem;}
 #footer a {display: block;height: 100%;color: #666666;text-align: center;font-size: 0.14rem;}
 #footer a span{font-size: 0.24rem;}
 #footer a.active{color: #02D1C5;}
 #footer a.footer-content{width: 0.5rem;height: 0.5rem;border-radius: 50%;background-color: #02D1C5;font-size: 0.22rem;color: white;line-height: 0.5rem;position: relative;bottom: 0.24rem;}
 
这个结构所有数据都是写在iPhone 6的分辨率基础上的，它的效果也成功地实现了，具体效果可以参考图1，但是要注意，这个时候如果我们切换了设备，那html的font-size是不会智能的切换的，rem也就没做到适配了。仅仅是这样我们是实现不了图2的效果的，不妨看下此时它在iPad下的效果：
 
 （图3）
 这个时候可以发现它和图2的效果差别是非常大的，那么rem怎么做到等比缩放呢，这里就要用到vw了。
 
2.vw
 
vw也是一个单位，并且也是一个相对单位：
vw -> view width 
vh -> view height
        相对单位：表示把屏幕自动分成了100vw宽和100vh高。
            vw / vh : 把屏幕分为100份，1vw等于屏幕宽的1%。
这里的100份，它是适用于各种分辨率下的，不管是宽375px的设备，还是414px的都是一样的效果。
假设屏幕是375px -> 100vw -> 1vw == 3.75px
假设屏幕是414px -> 100vw -> 1vw == 4.14px
	在实际操作中我们一般都会选择iphone6的设备，它的宽度就是375px的，于是我们可以进行一个简单的计算
1vw == 3.75px ? -> 多少个vw == 100px -> 26.666667vw -> 100px
 
所以fong-size：100px == font-size：26.666667vw
 了解了vw的原理我们只需要对上述案例的代码进行小小的带动就可以了，如下所示：
 html{font-size: 26.666667vw;}
 这样无论任何设备下，就都可以自动运算转换进行适配了。
 
3.拓展
 
	在实际操作中计算也是很容易的，如果设置的数值因为种种需要不好计算，比如font-size:75px,那我们也可以用vscode中的插件px to rem   
 

 
 （图4）
 然后按上图设置一下，无论需要跟元素的font-size是多少，只需要改动px-per-rem的数值就可以了，比如我这里设置的就是100，然后回到代码页面选中需要改动的代码，按下快捷键alt+z就可以全部改成rem了。

 
css中vw指的是什么单位
 
发布时间：2020-12-16 10:46:00
 
来源：亿速云
 
阅读：66
 
作者：小新
 
这篇文章主要介绍了css中vw指的是什么单位，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。在css中，vw是一个长度单位，一个视口单位，是指相对于视口的宽度；视口会被均分为100单位的vw，则1vw等于视口宽度的1%，比如浏览器的宽度为1920px，则“1vw=1920px/100=19.2px”。
 
视口单位(Viewport units)
 
什么是视口？
 
在PC端，视口指的是在PC端，指的是浏览器的可视区域；
 
而在移动端，它涉及3个视口：Layout Viewport(布局视口)，Visual Viewport(视觉视口)，Ideal Viewport(理想视口)。
 
视口单位中的“视口”，PC端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。
 
根据CSS3规范，视口单位主要包括以下4个：
 
1.vw：相对于视口的宽度， 视口被均分为 100 单位的vw，1vw等于视口宽度的1%。
 
2.vh：相对于视口的宽度， 视口被均分为 100 单位的vh，1vh等于视口高度的1%。
 
3.vmin：选取vw和vh中最小的那个。
 
4.vmax：选取vw和vh中最大的那个。
 
vw 和 vh
 
全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于屏幕宽度和高度的 1%。
 
vh and vw：相对于视口的高度和宽度，而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。
 
比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。
 
vh/vw与%区别
 

 
代码：
 
body{background-color:orange;}
 
.p{width:50vw;height:50vh;background-color:pink;fontsize:3em;}
 
P 标签的宽度为 50vw
 
效果：
 

 
说明：
 
1 个 vw 相当于页面宽度的 1%，比如页面宽度是 1000px，那么 1vw
 
就是 10px，vh 同理。
 
P 标签的宽度是 50vw，所以就是页面宽度的 50%，高度是 50vh，所以就
 
是页面高度的 50%。
 
感谢你能够认真阅读完这篇文章，希望小编分享css中vw指的是什么单位内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!