CSS中的单位

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值