css样式中的vw什么意思,css vw是什么单位

在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%。

更多编程相关知识，请访问：编程学习！！

css样式中的vw什么意思,css vw是什么单位相关推荐

css样式中的属性区分大小写吗,css属性区分大小写吗？
css属性一般不区分大小写,CSS对大小写不敏感.不过存在一个例外:如果涉及到与HTML文档一起工作的话,class和id名称对大小写是敏感的:且有时css的属性选择器对于属性值是区分大小写的,而对于 ...
float属性html,详解CSS样式中的float属性
详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...
css样式中关于li的横向排列
在css样式中关于li的横向排列的方法大致有两种: 第一种 :直接在<li>里面设置样式 <ul style="list-style:none;"> < ...
CSS样式中” 大于号”
CSS样式中" 大于号" 在一段CSS代码中见到一个大于号(>),代码如下: BODY#css-zen-garden > DIV#extraDiv2 { BACKGRO ...
html 中写样式,css样式中黑体怎么写
css样式中黑体怎么写 css中通过font-family指定黑体即可.font-family:"Heiti SC","黑体-简" 如果是中文字体需要加引号,字 ...
html中font-family样式,详解中文字体在CSS样式中font-family对应的英文名称
宋体:SimSun 黑体:SimHei 微软雅黑:Microsoft YaHei 微软正黑体:Microsoft JhengHei 新宋体:NSimSun 新细明体:PMingLiU 细明体:Ming ...
在HTML中表示内嵌CSS样式的标记,html怎么加css样式
html怎么加css样式?下面本篇文章就来给大家介绍一下在HTML中添加CSS样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.行内式(使用style属性,在HTML标 ...
CSS样式中选择器+盒子模型+定位+浮动
CSS样式中选择器+盒子模型+定位+浮动一.选择器选择器,选择你所需要修饰的HTML元素 1.通配符选择器 <!DOCTYPE html> <html><head&g ...
ol在html中意思,在CSS样式中 .ol是什么意思啊
在CSS样式中 .ol是什么意思啊作者:佚名来源:网络整理 2011-1-27 在CSS样式中.ol是什么意思啊最佳答案 1〉type类型选择项目符号用的不同样式 list-style-type ...
双下划线一粗一细怎么加_css双下划线 css样式中怎样控制下划线的粗细?
html 怎么加双横线给相应的标签加一个属性border-bottom:3px double red; 如果双线间的距离要加大,把3px改为更大的值就行了,不过不能小于3px,不然就叠在一起看不出来是 ...

css样式中的vw什么意思,css vw是什么单位

css样式中的vw什么意思,css vw是什么单位相关推荐

最新文章

热门文章