CSS中的常见单位（px,%,em,rem,vw,vh,vmax,vmin,calc)

像素(px)&百分比(%)

像素(Pixel)

长度单位，相对于显示器屏幕分辨率而言，通常在不定义显示缩放比例的情况下，1px对应显示器屏幕上的一个像素点。
早年的pc端展示的页面基本都用这个单位。

百分比(%)

相对长度单位，指占用的父元素宽度/高度的比例。
当指定为100%时，会占据父元素的全部宽度或高度；也可以指定大于100%的数值，这时，子元素会超出父元素的边界。

EM&REM

这两个都是相对长度单位。区别在于：

EM是相对于父元素
REM是相对于根元素。REM中的“R”就是ROOT的意思。页面中的根元素是指html标签。

现代浏览器通常默认字体大小是16px，所以rem/em的数值实际上都是16px的倍数。例如，当字体大小为16px时，有：

问题在于，当使用16px做为默认大小时，12px或10px这种数值使用rem/em来表示，会在计算和书写时比较麻烦。所以通常会在css的html选择器中将字体大小进行重置。

html{font-size: 62.5%;
}

也就是说现在默认字体大小不再是16px，而是16px*0.625=10px。这时，在使用rem/em时，就方便多了。此时的12px就是1.2rem, 10px就是1rem，计算和书写更加方便。

这里需要注意一点，虽然在html选择器和其他选择器中都定义了font-size属性，但是要注意区别

html {# 这里是重新设置根字体大小，其含义是16px*62.5%=10px，也就是说将根字体大小设置为10px;font-size: 62.5%;
}
.parent {# 这里是应用根设置的字体大小，20rem = 10px*20 = 200pxwidth: 20rem;height: 20rem;# 指定字体大小是20pxfont-size: 2rem;
}

EM的缺点

前面提到，EM是相对于父元素进行计算，所以当页面比较复杂时，计算EM，也就会变的复杂。
究其原因，是因为其所有字体大小都相对于父元素的大小决定的，当页面有多层嵌套时，同样是定义2rem/2em，实际显示的字体大小会不同。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>html {font-size: 62.5%;}.parent {width: 600px;height: 600px;background-color: lightblue;}.item_em_1,.item_em_2 {font-size: 2em;background-color: limegreen;}.item_rem_1,.item_rem_2 {font-size: 2rem;background-color: purple;}</style></head><body><div class="parent"><div class="item_em_1">EM_AA（这里EM与REM自动大小相同）<div class="item_em_2">EM_BB（这里字体相对父元素明显变大）</div></div><div class="item_rem_1">REM_AA<div class="item_rem_2">REM_BB（这里字体与父元素相同）</div></div></div></body>
</html>

所以在前端开发时，尽量不要使用EM！容易迷糊！

VW&VH

这两个单位都是相对于页面显示窗口的大小。

VW：视图宽度(Viewport Width),将页面显示窗口的宽度分成100份，每1vw是视图窗口宽度的1/100。
VH：视图高度(Viewport Height),将页面显示窗口的高度分成100份，每1vh是视图窗口高度的1/100。

vmax&vmin

vmax:取当前vw,vh中的最大值
vmin:取当前vw,vh中的最小值

计算

可在CSS中使用calc进行数值的计算

计算时，要注意±符号前后必须要有空格

calc(100vh - 10px)
calc(100vh - 10rem)

CSS中的常见单位（px,%,em,rem,vw,vh,vmax,vmin,calc)相关推荐

【前端基础】整理常见的单位 px em rem % vw vh vmin vmax rpx
基本单位单位计算方式简介 px 标准像素优点兼容性最好,缺点没有弹性,对于过大过小屏幕显示效果不好 em font-size元素大小 1em等于font-size的大小(font-size默认 ...
css px em rem % vw vh vm 区别
前言在传统项目开发中,我们只会用到 px.%.em 这几个单位长度,它们可以适用大部分项目的开发,并且拥有较好的兼容性. 而从 css3 开始,浏览器对逻辑单位的支持又提升了新的境界,增加了 rem ...
css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
web开发之长度单位：px, pt, rem, vw, vh
在前端开发中,常常会碰到各种长度单位,比如 px, em, rem, vw 等. 总的来说,可以把这些长度单位分成两类:绝对长度单位和相对长度单位. 绝对长度单位绝对长度单位是一个固定的值,一个 ...
CSS单位--px,em,rem,rpx区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? Px PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够 ...
关于CSS中的字体尺寸设置 em rem等
常用单位在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...
html移动端怎么做城市选择,移动端页面单位的选择（px, em, rem, vw）
px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
px,em,rem,vw单位在网页和移动端的应用
px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...