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. 这种技术需要一个参考点, 一般都是以 <body> 的 “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. 在根元素 <html> 中定义了一个基本字体大小为 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” 来实现代浏览器的效果
