px
- 绝对长度单位,像素是相对于显示器屏幕分辨率来说的,比较稳定和精准
- IE 无法调整那些使用px 作为单位的字体大小
- 国外的大部分网站能够调整的原因在于其使用了em 或rem 作为字体单位
- Firefox 能够调整px 和em,rem,但是有大部分的国产浏览器使用IE 内核
一个像素表示了计算机屏幕所能显示的最小区域,像素分为两种类型:
- CSS 像素(逻辑像素):为 Web 开发者提供,在 CSS 中使用的一个抽象单位
- 物理像素:只与设备的硬件密度有关,任何设备的物理像素都是固定的
设备像素比(Device Pixel Ratio) = 一个设备的物理像素 / 逻辑像素
rpx
- rpx 是微信小程序独有的、解决屏幕自适应的尺寸单位
- 可以根据屏幕宽度进行自适应,不论大小屏幕,规定屏幕宽为 750rpx
- 通过 rpx 设置元素和字体的大小,小程序在不同尺寸的屏幕下,可以实现自动适配
rpx 和 px之间的区别:
- 在普通网页开发中,最常用的像素单位是px
- 在小程序开发中,推荐使用 rpx 这种响应式的像素单位进行开发
em
-
根据基准来缩放字体的大小。
-
em 是相对长度单位,相对于当前元素的父元素的
font-size
进行计算,如果当前元素未设置则相对于浏览器的默认字体尺寸。当改变浏览器设置里的字体大小时,em 值也会相应改变。 -
em 会继承父级元素的大小,类似百分比。
-
em 作为行高单位时,相对于自身字体大小,整个页面内 1em 不是一个固定的值。
-
任意浏览器的默认字体高都是16px。
所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。
为了简化font-size 的换算,需要在css 中的body 选择器中声明
Font-size=62.5%
,这就使em值变为16px*62.5%=10px
,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。 -
重新计算那些被放大的字体的em 数值。避免字体大小的重复声明。也就是避免1.2 * 1.2= 1.44 的现象。
比如:你在
#content
中声明了字体大小为1.2 em,那么在声明p 标签的字体大小时就只能是1em,而不是1.2em,因为此em非彼em,它因继承#content
的字体高而变为了1em=12px。
rem(font size of the root element)
- 相对长度单位
- rem 是相对于根元素(html)的
font-size
进行计算,rem 不仅可设置字体大小,也可以设置元素宽高属性。 - 和px 之间的转换规则和em 一样。它的优势在于不会继承父级元素,所以值固定。
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 */ }
在根元素<html>
中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以16px 为基准 )。
从上面的计算结果,使用rem 就像使用px 一样的方便,而且同时解决了px 和em 两者不同之处。
px 与 rem 的区别:
- px 对于只需要适配少量设备,且分辨率对页面影响不大的,使用 px 即可, px 设置更为精准 。
- 随着 rem 在众多的浏览器都得到支持,有需要考虑到对多设备,多分辨率的自适应,无疑这时候 rem 是最合适的(如:移动端的开发)。
Rem 的缺点:
- 小说网站,屏幕越小的移动设备如果用了rem 肯定文字就越小,就会导致看文章的时候特别费眼
vw/vh
CSS3 特性 vh 和 vw:
- vh 相对于视窗的高度,视窗高度是100vh
- vw 相对于视窗的宽度,视窗宽度是100vw
视窗指的是浏览器内部的可视区域大小,即 window.innerWidth/window.innerHeight
大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
百分比
通常认为子元素的百分比完全相对于直接父元素。
如果设置了top、margin、padding 等:
- 子元素的 top 和 bottom 如果设置百分比,则相对于直接非 static 定位(默认定位)的父元素的高度
- 子元素的 left 和 right 如果设置百分比,则相对于直接非 static 定位(默认定位的)父元素的宽度
- 子元素的 padding/margin 如果设置百分比,不论是垂直方向或者是水平方向,都相对于直接父亲元素的 padding/margin ,而与父元素的 height 无关。