css样式中的vw什么意思,CSS 中 vw 和 % 有什么区别吗?

CSS 中 vw 和 % 有什么区别吗?

% 单位

%(百分比)是一个相对长度单位, 相对于包含块 (containing block) 的高宽或字体大小来取值.

关于包含块 (containing block) 的概念, 不能简单地理解成是父元素.

如果是静态定位和相对定位, 包含块一般就是其父元素.

如果是绝对定位的元素, 包含块应该是离它最近的 position 为非 static 属性的祖先元素.

如果是固定定位的元素, 它的包含块是视口(viewport).

vw 单位

vw,vh,vmin,vmax 是一种视窗单位, 也是相对单位. 它相对的不是父节点或者页面的根节点. 而是由视窗 (Viewport) 大小来决定的, 单位 1, 代表类似于 1%. 视窗 (Viewport) 是你的浏览器实际显示内容的区域 -, 换句话说是你的不包括工具栏和按钮的网页浏览器.

具体描述如下:

vw: 视窗宽度的百分比(1vw 代表视窗的宽度为 1%)

vh: 视窗高度的百分比

vmin: 取当前 Vw 和 Vh 中较小的那一个值

vmax: 取当前 Vw 和 Vh 中较大的那一个值

vh 和 vw 相对于视口的高度和宽度, 1vh 等于 1/100 的视口高度, 1vw 等于 1/100 的视口宽度 比如: 浏览器高度 900px, 宽度为 750px, 1 vh = 900px/100 = 9 px,1vw = 750px/100 = 7.5 px, 很容易实现与同屏幕等高的框.

calc + vm 计算宽度width:800px;

width:-moz-calc(100vm-(2*10)px);

width:-webkit-calc(100vm-(2*10)px);

width:calc(100vm-(2*10)px);

更多 Web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!

来源: http://www.css88.com/qa/css3/18122.html