您的位置：首页 > Web前端 > CSS

【CSS】基于视口单位vw vh vmin vmax 以及 rem和ch

2017-11-25 16:30 267 查看

素质N连

既然已经有了percentage值，为什么还要用基于视口单位呢？

因为，如果你想根据视口来调整某个元素的大小，采用percentage计算，那么得每一层父元素都使用percentage计数。但如果用基于视口单位，就省去了很多麻烦！

为什么不可以用js获取窗口大小，然后做css？

可以是可以，但是这颇有css-in-js的味道。我个人来说，不喜欢这种。并且在加载上不太符合浏览器的加载方式。我曾经尝试过把css写在js中，但是出现一个问题就是，频繁卡顿。

js是动态获取viewport大小，而css只是在加载时候渲染，是不是js灵活性更高？

非也非也。你可以用我下面给的示例试一试。怎么拖动viewport，小方块都是在屏幕中间。恰恰相反，你动态获取的viewport大小只是在加载的时候渲染，而基于viewport单位却是真正动态的。

基本概念

如果想要一个元素的宽度为可视区域的50%，那么可以用50vw来表示。

vw 可视区域宽度（viewport width），总宽度100vw；

vh 可视区域高度（viewport height），总高度100vh；

vmin 比较可视区域宽度和高度，取小；

vmax 比较…，取大；

rem 相对于html的font-size 只要设置了html的font-size，其他单位就可以用rem

ch 一个相对于0的大小 1ch=1英文=1数字=0.5汉字

示例

做一个长宽均为140px的方块相对于屏幕居中。

<style>
*{
margin: 0;
padding: 0;
}

4000
html{
font-size: 14px;
}
.box{
width:10rem;
/*140px*/
height: 10rem;
margin-top: calc(50vh - 5rem);
margin-left: calc(50vw - 5rem);
background-color: pink;
}
</style>
<body>
<div class='box'>
</div>


注意：ch单位和font-family、浏览器等有一定的关系，经过测试，有的字体，如微软雅黑在chrome浏览器上，输入6ch显示3个半汉字…但是使用宋体和cursive在Chrome上都正常。然而cursive在Firefox上却显示3个半汉字。

希望大家在使用的时候，能精心调试

挚谢阅读。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航