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个)

  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
    
    2. em / rem 的区别:
       1. em 相对于父元素; rem 相对于根元素 。
        
    3. em / rem 的共同点:
       1. em 和 rem 相对于 px 更具有灵活性, 他们是相对长度单位, 意思是长度不是定死了的, 更适用于响应式布局 。
    
  4. vw:

    1. viewpoint width, 视窗宽度, 1vw = 视窗宽度的 1%
      
    2. viewpoint height, 视窗高度, 1vh = 视窗高度的 1%
    
  5. vmax / vmin

    1. vmax: 当前较大的 vw 和 vh 。
    
    2. vmin: 当前较小的 vw 和 vh 。
    
  6. 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” 来实现代浏览器的效果
 
  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值

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

如果对你有所帮助,大家可以点个关注;整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 每次整理时都在思考如何让大家更容易理解, 更容易找到、看到自己想看到的内容; 无论知识点是大是小, 我都会验证后再分享, 以防自己发表的文章给大家造成误导。如有问题还望不吝赐教,本人会及时更改 (本文原创, 如需转载,请注明出处) 。

以上是关于css常用单位总结: px / em / rem / vw / vh / vmax / vmin的主要内容,如果未能解决你的问题,请参考以下文章

彻底弄懂css中单位px和em,rem的区别

彻底弄懂css中单位px和em,rem的区别

CSS3中的rem、em与px间的换算关系

移动端布局适配(px,em,rem,vh,vw)

css总结5:pxemrem区别介绍

css中px,em和rem的区别