html em vw,css常用单位总结: px / em / rem / vw / vh / vmax / vmin

1. css 的单位: px / em / rem / vw / vh / vmax / vmin (7个)

1. px:

1. px 是固定的像素, 一旦设置了就无法因为页面大小而改变

2. em:

1. em 是描述相对于, 应用在当前元素的字体尺寸, 所以它也是相对长度单位 。 一般浏览器字体大小默认为 16px, 则 2em == 32px;

2. 子元素字体大小的 em 是相对于父元素字体大小

3. 元素的 width/height/padding/margin 用 em 的话, 是相对于该元素的 font-size

3. rem:

1. 根元素 (html) 的 font-size

4. em / rem 的区别:

1. em 相对于父元素; rem 相对于根元素 。

5. em / rem 的共同点:

1. em 和 rem 相对于 px 更具有灵活性, 他们是相对长度单位, 意思是长度不是定死了的, 更适用于响应式布局 。

6. vw:

1. viewpoint width, 视窗宽度, 1vw = 视窗宽度的 1%

7. vh:

1. viewpoint height, 视窗高度, 1vh = 视窗高度的 1%

8. vmax:

1. 当前较大的 vw 和 vh 。

9. vmin:

1. 当前较小的 vw 和 vh 。

10. 注意:

1. chrome 设置的最小字体大小为 12px, 意思就是说低于 12px 的字体大小会被默认为 12px

1. em 使用设置:

1. 任意浏览器的默认字体高都是 16px 。 所有未经调整的浏览器都符合: 1em=16px。 那么 12px = 0.75em, 10px = 0.625em 。

2. 为了简化 font-size 的换算, 需要在 css 中的 body 选择器中声明 Font-size = 62.5%;

1. 这就使 em 值变为 16px*62.5% = 10px, 这样 12px = 1.2em, 10p x= 1em, 也就是说只需要将你的原来的 px 数值除以 10, 然后换上 em 作为单位就行了 。

3. 这种技术需要一个参考点, 一般都是以

的 “font-size” 为基准 。

1. 比如说我们使用 “1em” 等于 “10px” 来改变默认值 “1em=16px”; 这样一来, 我们设置字体大小相当于 “14px”时, 只需要将其值设置为 “1.4em” 。

4. body {font-size: 62.5%; // 10 ÷ 16 × 100% = 62.5%}

5. 真正的计算公式是: 1 ÷ 父元素的 font-size × 需要转换的像素值 = em值

2. rem 使用设置:

1. 在根元素 中定义了一个基本字体大小为 62.5% (也就是10px 。 设置这个值主要方便计算, 如果没有设置, 将是以 “16px” 为基准)。

2. html {font-size: 62.5%; // 10 ÷ 16 × 100% = 62.5%}

body {font-size: 1.4rem; // 1.4 × 10px = 14px}

h1 { font-size: 2.4rem; // 2.4 × 10px = 24px}

3. 不过使用单位设置字体, 可不能完全不考虑 IE 了, 如果你想使用这个 REM, 但也想兼容 IE 下的效果, 你可考虑 “px” 和 “rem” 一起使用, 用 "px" 来实现 IE6-8 下的效果, 然后使用 “Rem” 来实现代浏览器的效果