px与 rem css常见单位

文笔可能不太好，请多多包涵

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>

<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;
}

在这里插入图片描述

这部分参考于 https://www.w3cpl us.com/css/7-css-units-you-might-not-know-about.html

cm_xuan77

发布了45 篇原创文章 · 获赞 14 · 访问量 3万+

私信关注