em表示什么长度单位_css基础一、理解css中的单位

说起css单位，相信各位前端同学们已经很熟悉了，可谓是基础中的基础。

下面简单介绍一下楼主在开发过程中常用的css单位给初步入门的同学们。

(浏览器的默认字体高都是16px)

一、总览

① px ② % 百分比 ③ em ④ rem ⑤ vw/vh ⑥ vmin/vmax

css单位不止这些，还有诸如 in mm pt pc ex ch等楼主从入行到现在一次没用过，所以就不赘述了。

二、详解

① px , 像素单位 pixel的缩写，相对长度单位，相对于屏幕分辨率。

② % 百分比 ， 相对长度单位，相对于父元素的百分比值 ，比如你设置父元素的宽度为100px ，那么此时 10% = 10px

③ em ，相对父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。我们通常设置body的fontsize为62.5 ，这时1em = 10px ，更为方便计算。

④ rem , CSS3新增的一个相对单位，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。我们通常设置html的fontsize为100px ， 这时 1rem = 100px , 更为方便计算。(这里又一个默认的坑，即html最小设置为12px 设置html的fz低于12px都按12px来算)

具体使用方法：

@media only screen and (min-width: 320px){
    html {
      font-size: 62.5% !important;
    }
  }
@media only screen and (min-width: 640px){
    html {
      font-size: 125% !important;
    }
}
@media only screen and (min-width: 750px){
    html {
      font-size: 150% !important;
    }
}
@media only screen and (min-width: 1242px){
    html {
      font-size: 187.5% !important;
    }
}

⑤ vw/vh , 相对于视口的高度和宽度， 1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度 比如：浏览器宽度为375px 高度667px, 1vw = 375px/100 = 3.75 px，1 vh = 667px/100 = 6.67 px， 很容易实现与同屏幕等高的框。

⑥ vmin/vmax ，vw与vh之间比较小/比较大的那一个。

三、其它

① 、 或许会有小伙伴看到有的字体设置是这样子的

font: italic bold 30px/50px arial,sans-serif;

分别表示

font-style
font-variant
font-weight
font-size/line-height
font-family

在 CSS 中，有两种不同类型的字体系列名称：

通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）
除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：
Serif 字体
Sans-serif 字体
Monospace 字体
Cursive 字体
Fantasy 字体

他们也可以通过font-family来指定

②、或许会有小伙伴也会用到类似于字体 30px/50px 的设置

border-radius: 2em 1em 4em / 0.5em 3em

当border-radius使用一个参数时，表示 上左，上右，下右，下左。

当border-radius使用两个参数时，表示 上左下右 、 上右下左 两个圆角。

当border-radius使用三个参数时，表示 上左，上右和下左，下右。

当border-radius使用斜杠分开时，第一个参数表示圆角的水平半径，第二个参数表示圆角的垂直半径

上面的等价于

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

好了 先写到这里

如有错误 欢迎批评指正