css3 视区单位 vh wh

2023-01-24 0 418

Css3和 html5正式发布早已过了5年半之久,作为两个码农,只不过里头新减少的条码,很多显然就不晓得,更不用说操控性,这久再弄终端页面的这时候,为的是这种效用,我在查阅页面的源码的这时候,我看见min-height:calc(100vh + 22px)

佩佩,那个是甚么读法,能此种写?

结论腾讯了呵呵,啊懊悔啊!写了那么十多年!不晓得还能此种写

css3 视区单位 vh wh

Vw:相对于视框的长度:视框长度是100Vw

Vh:相对于视框的度:视框度是100Vh

“视区”所称为应用程序外部的IntelliTone地区大小不一,即window.innerWidth/window.innerHeight大小不一,不包涵图标CSS2和顶部图标的应用程序地区大小不一

视区基层单位的相容性:应用程序(https://caniuse.com/#search=vh)

css3 视区单位 vh wh

相对现在主流的应用程序,视区的基层单位还是能够满足现在的需求,特别是在终端端上。

但是在写基层单位的这时候在前面还有两个calc,那个又拿来做甚么呢?

calc是英文单词calculate(计算)的缩写,是css3的两个新增的功能,用来指定元素的长度。比如说,你能使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,能通过calc()计算得到元素的长度。

calc同时还能进行运算的方式:

需要注意的是,运算符前后都需要保留两个空格,例如:width: calc(100% – 10px);

任何长度值都能使用calc()函数进行计算;

calc()函数支持 “+”, “-“, “*”, “/” 运算;

calc()函数使用标准的数学运算优先级规则;

calc(100vh – 10px) 表示整个应用程序窗口度减去10px的大小不一

calc(100vw – 10px) 表示整个应用程序窗口长度减去10px的大小不一

这样我们在写终端端,不好确定固定值的这时候,就比较方便,一些特殊的布局就比较好编写。使用下来也比较方便,相对长度的最大和最小的设置,height:calc(100vh)的读法确能解决那个问题。现对于100%的读法,我觉得视区基层单位更加好用。网上也又很多案例,喜欢的朋友能多了解下。

举报/反馈

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务