CSS中的单位

灰太狼 2022-06-10 01:59 186阅读 0赞

**PX(pixel)像素**，相对长度单位。像素px是相对于显示器分辨率而言的

**特点：**  
1、IE无法调整那些使用px作为单位的字体大小  
2、国外的大部分网站能够调整的原因在于其使用了em或者rem作为单位  
3、Firefox能够调整px和em，rem，但是96%以上的用户使用IE内核或IE浏览器

--------------------

**EM** 相对长度单位。相对于当前对象内文本的字体尺寸。  
若当前行内文本文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

**特点：**  
1、em的值不固定  
2、em会继承父级元素的字体大小

**Tic:**任意浏览器的默认字体行高都是16px，所有未经过调整的浏览器都符合：1em=16px;

\*\*即:\*\*12px=0.75em,10pc=0.625em

为简化换算：在css中body选择器中声明Font-size=62.5%,可以使得em的值变为16px\*0.625%=10px,12px=1.2em,10px=1em

**即：**原数值px除以10，换上em作单位即可

**注意：**  
如果父元素为\#content中声明的字体大小为1.2em(此处1.2em=12px)，那\#content里的元素，如里面有个p元素，那这个p元素的字体大小只能是1em(此处为12px),而不是1.2em，因为继承了\#content父元素的字体高度，变为1em=12px

**总结三点：**  
1、body选择器中声明的Font-size=62.5%  
2、将原来的px舒适除以10，染回换上em作单位  
3、重新计算那些被放大的字体的em数值，避免字体大小的重复声明

--------------------

**REM** css3中新增的相对单位（root em ，根em）  
使用rem为元素设定字体大小时，任然是相对大小，但只相对html根元素，该单位集相对大小和绝对大小优点与一身，可以通过只修改根元素就成比例的调整新的字体大小，又可以避免字体大小逐层复合的连锁反应。

**问题：**  
IE8以及以前版本不支持rem做单位  
解决办法：  
对于不支持rem的浏览器，多写一份绝对单位的声明，浏览器就会忽略rem的设定，而采用px作为单位设定。

\*\*例子：\*\*p\{font-size:14px;font-size:0.815rem\}

**何时使用rem？**  
1、若用户群体使用最新版的浏览器，则推荐使用rem  
若需要考虑兼容性，则使用px，或两者同时使用  
2、对于只需要匹配少部分手机设备，且分辨率对页面影响不大的。使用px即可  
3、对需要匹配各种移动设备，且分辨率差异范围大的则用rem

--------------------

**pt,px,em的换算**

**pt**:(point磅)：物理长度单位，只72分1英寸

**px**:(pixel像素)：虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算为物理长度，则需要指定精度DPI

**DPI**:(Dots Per Inch),每英寸像素

windows系统默认96dpi，Apple系统默认72dpi

em相对单位长度，相当于当前对象内文本的字体大小尺寸，相对长度单位，现指字符宽度的倍数。

**字号**：中文字库的特有单位，中文带好便是特定磅值

**换算公式：**  
pt=1/72(英寸),px=1/dpi(英寸)

因此:pt=px8dpi/72  
以windows下的96dpi算，1pt=px\*96/72=px\*4/3

还没有评论，来说两句吧...