资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/（CSS） px，pt，em，rem的区别

（CSS） px，pt，em，rem的区别

Lemon_95 / 1305人阅读

摘要：一绝对长度单位绝对长度单位代表一个物理测量，当输出介质的物理性质是已知的，如用于打印布局。对于打印机和高分辨率的屏幕，一个意味着多个设备像素，因此，每英寸的像素的数量保持在左右。是新增的单位，等于根元素的字体大小。

一、绝对长度单位 
绝对长度单位代表一个物理测量，当输出介质的物理性质是已知的，如用于打印布局。这是通过将一个单元锚定到一个物理单元，并将其定义为相对于它的另一个。对于低分辨率的设备，如屏幕、高分辨率设备，如打印机，该锚定是不同的。
1.1 px（像素）

像素与显示设备相关。对于屏幕显示，通常是一个设备像素（点）的显示。对于打印机和高分辨率的屏幕，一个px意味着多个设备像素，因此，每英寸的像素的数量保持在96左右。

当你需要精确地像素时，用px设定字体大小是一种好方法。一像素的大小是固定的。这是一个不取决于平台的、跨浏览器的准确设置字体大小高度为你所想的像素大小的方法。因为不同浏览器为得到同样效果的算法可能不同，所以显示效果可能有微小的不同。

用像素字体定义使得字体大小不可由用户的浏览器改变。所以，如果想创造能广泛使用的设计请避免使用像素设定字体。

1.2 pt（磅）

1pt = (1 / 72)in。
另外：1in = 96px，3pt = 4px，25.4mm = 96px等。

二、相对长度单位 
相对字体大小的单位
2.1 em

em值的大小是动态的。当定义font-size属性时，1em等于元素的父元素的字体大小。如果你在网页中任何地方都没有设置文字大小的话，那它将等于浏览器默认文字大小，通常是16px。所以通常1em = 16px，2em = 32px。如果你设置了body元素的字体大小为20px，那1em = 20px，2em = 40px。那个2就是当前em`大小的倍数。

  2.   
  3.     
  4.     
  5.                  
  6.                                                                                                                     
  7.                          GPU云服务器
  8.                                              
  9.                          云服务器
  10.                                                                                                                                                  
  11.                                       
  12.                      
  13.                     
  14.                                                                                                px2rem
  15.                                                                                                            css和html的区别
  16.                                                                                                            css与html的区别
  17.                                                                                                            html和css的区别
  18.                                                          
  19.                  
  20.                
  21.               
  22.              
  23.                
  24.                    
     文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
  25.                  
  26.                    
    转载请注明本文地址：https://www.ucloud.cn/yun/111636.html
  27.                
  28.                       
  29.                
  30.               
  31.               
  32.                 
    相关文章
  33.                 
    •                              
    •                                                                                                     
    •                                                 
    •                           
      深入理解<em>CSSem>中em, rem, ex区别，及使用技巧
    •                                                      
      摘要：中常见尺寸单位描述百分比英寸厘米毫米一个是一个字体的。在中，是非常有用的单位，因为它可以自动适应用户所使用的字体。在中唯一例外的是属性，它的和值指的是相对父元素的字体大小。
    • CSS 中常见尺寸
    • 单位
    • 描述
    • %
    • 百分比
    • in
    • 英寸
    • cm
    • 厘米
    • mm
    • 毫米
    • ex
    • 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
    • pt
    • ...
    •                                                    
    •                           
    •                                 
    •                                     lbool
    •                                     
    •                                     评论0 
    •                                     收藏0 
    •                                 
    •                           
    •                       
    •                     
      •  
    •                                                                                        
    •                                                 
    •                           
      <em>ptem>，<em>pxem>，rem和em之间区别总结
    •                                                      
      摘要：与在设计字体的样式中，有些字体设置成，而不是，那是什么，和又有什么关系呢是印刷行业常用的单位，等于英寸，表示绝对长度。指的是像素，是屏幕上显示数据的最基本的点，表示相对大小。
    • pt与px
    • 在html设计字体的css样式中，有些字体设置成14pt，而不是14px，那pt是什么，和px又有什么关系呢？
    • pt(point)是印刷行业常用的单位，等于1/72英寸，表示绝对长度。px(pixel...
    •                                                    
    •                           
    •                                 
    •                                     pf_miles
    •                                     
    •                                     评论0 
    •                                     收藏0 
    •                                 
    •                           
    •                       
    •                     
      •  
    •                                                                                        
    •                                                 
    •                           
      <em>ptem>，<em>pxem>，rem和em之间区别总结
    •                                                      
      摘要：与在设计字体的样式中，有些字体设置成，而不是，那是什么，和又有什么关系呢是印刷行业常用的单位，等于英寸，表示绝对长度。指的是像素，是屏幕上显示数据的最基本的点，表示相对大小。
    • pt与px
    • 在html设计字体的css样式中，有些字体设置成14pt，而不是14px，那pt是什么，和px又有什么关系呢？
    • pt(point)是印刷行业常用的单位，等于1/72英寸，表示绝对长度。px(pixel...
    •                                                    
    •                           
    •                                 
    •                                     raledong
    •                                     
    •                                     评论0 
    •                                     收藏0 
    •                                 
    •                           
    •                       
    •                     
      •  
    •                                                                                        
    •                                                 
    •                           
      关于<em>CSSem>中的字体尺寸设置
    •                                                      
      摘要：常用单位在中可以用很多不同的方式来设定字体的尺寸。当你为一个元素添加单位时，应当考虑到所有父元素的字体尺寸。例宽度是中新提出的一个单位，通过宽度来计算字体尺寸。
    •   个人翻译，转载请注明出处
    •   英文原文：CSS Font Sizing
    • 写在前面
    • 上一篇文章如何做好移动端的响应式设计：Viewport控制讨论到了CSS像素，于是我决定研究一下如何用不同的方式来在CSS中设定字体...
    •                                                    
    •                           
    •                                 
    •                                     mcterry
    •                                     
    •                                     评论0 
    •                                     收藏0 
    •                                 
    •                           
    •                       
    •                     
      •  
    •                                                                                        
    •                                                 
    •                           
      <em>CSSem> 单位
    •                                                      
      摘要：概览中的长度单位有很多，觉得有必要整理备忘。单位大体分为两大类绝对单位，不会因为其他元素的尺寸变化而变化。如果想使用显示窗口的宽度或高度而不是父元素的宽度将会怎么样这正是和单位所提供的。和现代浏览器都支持这两个单位。
    • 概览
    • CSS中的长度单位有很多，觉得有必要整理备忘。
    • 网上介绍的也比较多和全，详见参考资料。
    • 单位大体分为两大类：
    • 绝对单位 ，不会因为其他元素的尺寸变化而变化。
    • 相对...
    •                                                    
    •                           
    •                                 
    •                                     ARGUS
    •                                     
    •                                     评论0 
    •                                     收藏0 
    •                                 
    •                           
    •                       
    •                     
      •  
    •                                                                            
    •                 
  34.               
  35.               
  36.                
  37.                   
  38.                   
    发表评论
  39.                    
  40.                                       
  41.                       
  42.                         登陆后可评论
  43.                                          
  44.                
  45.               
  46.                 
  47.                   
    0条评论
       
  48.                  
  49.                       
  50.               
  51.            
  52.            
  53.               
     
  54.                 
  55.                     
  56.                     
    Lemon_95
  57.                     
    男|高级讲师
  58.                     
  59.                      
  60.                                                                       
  61.       
  62.                                                                                         我要私信
  63.                      
  64.                                             
  65.                     
  66.                     
  67.                           
    TA的文章
  68.                           阅读更多
  69.                     
  70.                       
  71.                 
  72.                    
  73.               
  74.   
  75.                   
    最新活动
     
  76.            
  77.          
  78.                     
  79.                       
  80.                                                                                                                        
  81.                           
  82.                             云服务器                                 
  83.                           
  84.                         
  85.                                                 
  86.                           
  87.                             GPU云服务器                                 
  88.                           
  89.                         
  90.                                                                    
  91.                     
  92.                         
  93.                       
  94.                     
  95.                       
  96.                                         
  97.               
  98. 
                    
                
  100.                                               
  101.            
  102.
阅读需要支付1元查看
<