css常用单位总结: px / em / rem / vw / vh / vmax / vmin
Posted 黑木令
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css常用单位总结: px / em / rem / vw / vh / vmax / vmin相关的知识，希望对你有一定的参考价值。
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作中开发问题总结 相关的内容; 不积跬步，无以至千里, 戒焦戒躁 。
好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。
一: css 的单位: px / em / rem / vw / vh / vmax / vmin (7个)
-
px:
1. px 是固定的像素, 一旦设置了就无法因为页面大小而改变 -
em:
1. em 是描述相对于, 应用在当前元素的字体尺寸, 所以它也是相对长度单位 。 一般浏览器字体大小默认为 16px, 则 2em == 32px; 2. 子元素字体大小的 em 是相对于父元素字体大小 3. 元素的 width/height/padding/margin 用 em 的话, 是相对于该元素的 font-size -
rem:
1. 根元素 (html) 的 font-size 2. em / rem 的区别: 1. em 相对于父元素; rem 相对于根元素 。 3. em / rem 的共同点: 1. em 和 rem 相对于 px 更具有灵活性, 他们是相对长度单位, 意思是长度不是定死了的, 更适用于响应式布局 。 -
vw:
1. viewpoint width, 视窗宽度, 1vw = 视窗宽度的 1% 2. viewpoint height, 视窗高度, 1vh = 视窗高度的 1% -
vmax / vmin
1. vmax: 当前较大的 vw 和 vh 。 2. vmin: 当前较小的 vw 和 vh 。 -
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” 来实现代浏览器的效果
- 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值
- 注意:
1. chrome 设置的最小字体大小为 12px, 意思就是说低于 12px 的字体大小会被默认为 12px
如果对你有所帮助，大家可以点个关注；整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 每次整理时都在思考如何让大家更容易理解, 更容易找到、看到自己想看到的内容; 无论知识点是大是小, 我都会验证后再分享, 以防自己发表的文章给大家造成误导。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。
以上是关于css常用单位总结: px / em / rem / vw / vh / vmax / vmin的主要内容，如果未能解决你的问题，请参考以下文章