转载声明:文章来源https://blog.csdn.net/cmchenmei/article/details/83617409
css的单位:px 这个不需要说,rem/em,vh/vw,vmax/vmin
1. rem /em
1.1. 含义
rem 是根据根元素的fontSize来计算,这里的根源素指的是html;
em 是根据其父级的font Size来计算的。
eg:
rem
<html style='font-size:20px;'>
<header></header>
<body>
<div style='width:20rem;font-size:2rem;'>
/* div的width为10rem,即 10 * 20 = 200px ,fontSize是2*20 = 40px */
<p>哈哈</p>
/* fontSize设置2rem,即 2 * 20 = 40px 这边是根据根元素的font Size20px计算的,而不是根据其父元素的40px计算的*/
</div>
</body>
</html>
em
<html style='font-size:20px;'>
<header></header>
<body>
<div style='width:20rem;font-size:2rem;'>
/* div的width为10rem,即 10 * 20 = 200px ,fontSize是2*20 = 40px */
<p>哈哈</p>
/* fontSize设置2rem,即 2 *40 = 80px 这边是根据其父元素的40px计算的,而不是根据根元素的font Size20px计算的*/
</div>
</body>
</html>
1.2 px <=> rem 转换
;(function(win, doc) {
change()
function change() {
var remSize = window.innerWidth / 7.5 || 50 /*设计稿是以width = 750px 为基准的*/
document.querySelector('html').style.fontSize = (remSize > 100 ? 100 : remSize) + 'px' /*这样写是为了保障在pc端的时候可以兼容使用*/
}
win.addEventListener('resize', change, false)
win.addEventListener( 'orientationchange', change, false ) /* 这个是移动端设备横屏、竖屏转换时触发的事件处理函数 */
})(window, document)
2. vh/vw
1vh等于viewport高度的100%.窗口高度是1000px,1vh求得的值为10px;
1vw等于viewport宽度的100%.窗口宽度为750px,1vw求得的值为7.5px。
3. vmax/vmin
vmin和vmax是与屏幕的宽度和高度的最大值或着最小值有关,取决于哪个更大和更小。例如,如果浏览器设置为width750px,height1100px,1vmin会是7.5px,1vmax为11px。如果宽度设置为11000px,高度设置为750px,1vmin将会等于7.5px而1vmax将会是11px。
设想你需要一个总是在屏幕上可见的元素。使用高度和宽度设置为低于100的vmin值将可以实现这个效果。例如,一个div总是至少接触屏幕的两条边可能是这样定义的:
.box {
height: 100vmin;
width: 100vmin;
}
如果你需要一个总是覆盖可视窗口的正方形(一直接触屏幕的四条边),使用相同的规则只是把单位换成vmax。
.box {
height: 100vmax;
width: 100vmax;
}
感觉文章思路挺清晰的~
大厂面试的时候看重基础,更看重实战项目经验,业务场景使用的具体技术吧
学习到了 感谢分享