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

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

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

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

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

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

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

相对字体大小的单位

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

  

    

    

                 

                                                                                                                    
                         私有云
                                             
                         云服务器
                                                                                                                                                 
                                      
                     
                    
                                                                                               px2rem
                                                                                                           css和html的区别
                                                                                                           css与html的区别
                                                                                                           html和css的区别
                                                         
                 
               
              
             
               

                   
 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
                 
                   
转载请注明本文地址：https://www.ucloud.cn/yun/111636.html
               
                      
               

                 
                                  
上一篇：网站开发到上线全过程记录
  
                                                
                                       
下一篇：切图崽的自我修养－[TOOL] 用MockJs模拟数据
                                  
              
              

                
相关文章
                

                             
                                                                                                    

                                                

                          
深入理解<em>CSSem>中em, rem, ex区别，及使用技巧
                                                     
摘要：中常见尺寸单位描述百分比英寸厘米毫米一个是一个字体的。在中，是非常有用的单位，因为它可以自动适应用户所使用的字体。在中唯一例外的是属性，它的和值指的是相对父元素的字体大小。

CSS 中常见尺寸


单位
描述



%
百分比


in
英寸


cm
厘米


mm
毫米


ex
一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)


pt
...
                                                   
                          

                                

                                    lbool
                                    2019-08-29 16:44
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
<em>ptem>，<em>pxem>，rem和em之间区别总结
                                                     
摘要：与在设计字体的样式中，有些字体设置成，而不是，那是什么，和又有什么关系呢是印刷行业常用的单位，等于英寸，表示绝对长度。指的是像素，是屏幕上显示数据的最基本的点，表示相对大小。

pt与px
在html设计字体的css样式中，有些字体设置成14pt，而不是14px，那pt是什么，和px又有什么关系呢？
pt(point)是印刷行业常用的单位，等于1/72英寸，表示绝对长度。px(pixel...
                                                   
                          

                                

                                    pf_miles
                                    2019-08-30 12:51
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
<em>ptem>，<em>pxem>，rem和em之间区别总结
                                                     
摘要：与在设计字体的样式中，有些字体设置成，而不是，那是什么，和又有什么关系呢是印刷行业常用的单位，等于英寸，表示绝对长度。指的是像素，是屏幕上显示数据的最基本的点，表示相对大小。

pt与px
在html设计字体的css样式中，有些字体设置成14pt，而不是14px，那pt是什么，和px又有什么关系呢？
pt(point)是印刷行业常用的单位，等于1/72英寸，表示绝对长度。px(pixel...
                                                   
                          

                                

                                    raledong
                                    2019-08-01 15:08
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
关于<em>CSSem>中的字体尺寸设置
                                                     
摘要：常用单位在中可以用很多不同的方式来设定字体的尺寸。当你为一个元素添加单位时，应当考虑到所有父元素的字体尺寸。例宽度是中新提出的一个单位，通过宽度来计算字体尺寸。


  个人翻译，转载请注明出处
  英文原文：CSS Font Sizing


写在前面

上一篇文章如何做好移动端的响应式设计：Viewport控制讨论到了CSS像素，于是我决定研究一下如何用不同的方式来在CSS中设定字体...
                                                   
                          

                                

                                    mcterry
                                    2019-08-28 18:09
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
<em>CSSem> 单位
                                                     
摘要：概览中的长度单位有很多，觉得有必要整理备忘。单位大体分为两大类绝对单位，不会因为其他元素的尺寸变化而变化。如果想使用显示窗口的宽度或高度而不是父元素的宽度将会怎么样这正是和单位所提供的。和现代浏览器都支持这两个单位。

概览
CSS中的长度单位有很多，觉得有必要整理备忘。
网上介绍的也比较多和全，详见参考资料。
单位大体分为两大类：

绝对单位 ，不会因为其他元素的尺寸变化而变化。
相对...
                                                   
                          

                                

                                    ARGUS
                                    2019-08-28 18:23
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                           
                
              
              
               

                  
                  
发表评论
                   

                                      
                      

                        登陆后可评论
                      
                   
               
              

                

                  
0条评论
   
                
 
                      

              
           
           

              
 
                

                    
                    
Lemon_95
                    
男|高级讲师
                    

                     
                                                                      我要关注
      
                                                                                        我要私信
                     
                                            
                    
                    

                          
TA的文章
                          阅读更多
                    
                      

                                                  
手写HashMap，快手面试官直呼内行！
                            
阅读 1571·2021-11-24 09:39
                                                       
怎么快速成为一名JAVA程序猿?
                            
阅读 2112·2021-09-30 09:47
                                                       
缺省主机连接数限制是什么-路由器的缺省网关是什么意思？
                            
阅读 3875·2021-09-22 15:57
                                                       
css魔法——左边竖条的实现方法
                            
阅读 1681·2019-08-29 18:36
                                                       
关于一些Vue的文章。（1）
                            
阅读 3389·2019-08-29 12:21
                                                       
前端开源项目周报0321
                            
阅读 482·2019-08-29 12:17
                                                       
（CSS） px，pt，em，rem的区别
                            
阅读 1133·2019-08-29 11:25
                                                       
让footer固定在页面（视口）底部
                            
阅读 620·2019-08-28 18:26
                                                
                      
                
                
                 

                  
云社区相关服务
 
                    

                        
                            
                            提问
                        
                        
                            
                            学习
                        
                        
                        
                            
                            认证
                        
                      
                        
                            
                            产品
                        
                        
                        
                            
                            技术服务
                        
                          
                            
                            售前咨询
                        
                    
   
                
                   
              
  

                  
最新活动