vh与vw的使用事项

vw — 1vw 等于视口宽度的 1%
vh — 1vh 等于视口高度的 1%
vmin — vw 和 vh 中的较小值
vmax — vw 和 vh 中的较大值

calc经常被使用在计算剩下的宽度或者高度，可以根据机型动态改变布局的宽度或者高度，但是使用过程中有以下注意事项

style="height:calc(100vh - {{pageTopHeight}}px - 174rpx )"

在代码中运算符的前后必须要有空格才能生效

vh与vw的使用事项相关推荐

[css] 请说说你对vh、vw的理解以及它们的运用场景是什么？
[css] 请说说你对vh.vw的理解以及它们的运用场景是什么? vw: 100vw为视窗的宽度,即1vw是视窗宽度的1%vh: 100vh为视窗的高度,即1vh是视窗高度的1%运用场景图片查看大图: ...
html 自适应单位vw,CSS单位em、rem、vh和vw等及CSS3的calc()以及line-height百分比
css单位我们常用的是px,也即是像素.随着网页开发自适应的要求,css3新增了许多单位,rem.vw和vh.vmin和vmax.ch和ex等. em 做前端的应该对em不陌生,不是什么罕见的单位,是 ...
前端css单位小结：vh、vw、百分比、rem、px、计算属性calc
写在前面: 本文作为本人学习总结之用,同时分享给大家~ 个人前端博客网站:zhangqiang.hk.cn 欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步! 前端c ...
vh和vw自适应布局单位
在解决居中问题的时候,看到一种写法:100vh 先要弄懂它是什么就先看看什么是视口在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布 ...
前端面试题：px、rem、em、vh、vw、rpx的区别
px 像素,是相对于显示器屏幕分辨率而言的. em 相对长度单位.相对于当前对象内文本的字体尺寸.会继承父级元素的字体大小. rem 是相对于HTML根元素的字体大小. vh 和vw相对于视口的高度和 ...
-CSS3长度单位rem、vh、vw、vmin、vmax、ex、ch
用这几个单位就可以做自适应布局了,尤其是下面的vh,解决了高度不能使用百分比的问题,很爽. 另外,自适应除去用下面这些单位之外,还可以用width的一些新属性,fill-available.fit-c ...
深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. em ...
Vh和Vw的简介和使用
Vw:视区宽度百分值 Vh:视区高度百分值 Vmin:取Vw或Vh中较小的那一个 Vmax:取Vw或Vh中较大的那一个 1.视区:是指浏览器内部的可视区域大小,即window.innerWidth/w ...
通俗易懂——css长度单位：px、em、rem、vh、vw、in、...
单位解析 px 绝对单位.像素 em 相对单位.相对于其父元素的font-size,如父元素font-size: 12px:那么子元素1em = 12px,1em = 24px,- rem 相对单位 ...

vh与vw的使用事项

vh与vw的使用事项相关推荐

最新文章

热门文章