CSS应用calc()获得当今可视性显示屏高宽比编码实

2020-11-13 13:18| 发布者: | 查看: |

先掌握一下CSS3的相对性长短企业 : 相对性长短企业特定了一个长短相对性于另外一个长短的特性。针对不一样的机器设备相对性长短更可用。 CSS使用calc()获取当前可视屏幕高度代码示例 从而由此可见,根据vh / vw大家能够得到当今显示屏的视窗总宽,因此在css中,根据测算这一高宽比就可以促使div的高宽比全自动撑开到显示屏高宽比。而测算这一高宽比可使用css3的calc()涵数: calc() 涵数用以动态性测算长短值。 必须留意的是,计算符前后左右都必须保存一个空格符,比如:width: calc(100% - 10px); 一切长短值都可以令其用calc()涵数开展测算; calc()涵数适用 "+", "-", "*", "/" 计算; calc()涵数应用规范的数学课计算优先选择级标准; 因此,只需设定div的高宽比height为calc(100vh)就可以,100vh=视窗高宽比的100%,事例:
div {
 width: 100%;
 height: calc(100vh);
}
必须留意的是,该方式合适于网页页面高宽比相当于当今显示屏视窗高宽比,按具体要求将会還是必须JS的。
<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部