一. 尺寸单位
1. 整体的长度单位共分为两大类:
★ 注:本次主讲部分红字的尺寸单位。
(1) 绝对长度单位:绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等);
☆ 如:in , cm , mm , q , pt , pc , px ;
① px其实就是像素的意思,全称pixel,也就是图像的基本采样单位,总的来说px就是对应我们显示器的分辨率,相对于显示器屏幕分辨率而言,px就是一张图片最小的一个点,一张位图就是千千万万的这样的点构成的,比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像素点,垂直方向是768个像素点。
②
(2) 相对长度单位:相对长度单位是网页中常用的长度单位,它们根据元素的字体大小或其他相关属性来决定其长度,而不是使用固定的像素值。这种单位使得网页在不同设备和屏幕尺寸上能够更好地适应和缩放,从而提供更好的用户体验;
☆ 如:em , rem , % , vw , vh , vmax , vmin , vm , ch , ex 。
① em:是一个常用的相对长度单位,其值是根据元素的字体大小(font-size
属性)来设置尺寸的,其可以应用于多种CSS属性,如width
、height
、line-height
、margin
、padding
、border
等,使得元素的尺寸和间距能够根据字体大小自动调整。
② rem:是CSS3新增的另一个相对长度单位,其值是根据根元素(即html
元素)字体大小设置尺寸的。这使得在响应式设计中,特别是移动端页面开发中,能够更灵活地控制元素的尺寸。
【 ☆ em 和 rem:都是灵活、 可扩展的单位,由浏览器转换为像素值,具体取决于您的设计中的字体大小设置。 如果你使用值 1em 或 1rem,它可以被浏览器翻译成 从16px到 160px 或其他任意值,需要注意的是,浏览器的默认字体大小是16px(但不是所有的浏览器都是16px), 而且浏览器的默认字体大小都是可以改变的。】
③ vw 和 vh :相对于视口设置的宽度和高度 ,而不是父元素的(CSS百分比,也就是单位%,是相对于包含它的最近的父元素设置的高度和宽度),1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度。 例如:浏览器高度为950px,宽度为1920px, 则1 vh = 950px/100 = 9.5 px,1vw = 1920px/100 =19.2 px。
④ vmax和vmin:相对于视口的最大或最小长度,vmax会一直按照视口的最长方向为参考 (处理横竖屏问题),vmin同理。
2. 尺寸单位 - em、rem与像素的转换关系
(1)当使用em单位时,像素值将是em值乘以使用em单位的元素的字体大小。 在很多资料中都说em是根据父级元素的字体大小进行设置,其实根据w3c的约定,em大小是根据设置了em单位元素的大小进行设置。为什么会有以上说法是应为css的继承特性导致,子级元素继承了父级的font-size属性,所以设置em时说是根据父级的字体大小进行设置
★ 注意:特别要注意em的继承问题。
(2)rem单位的大小永远都会根据根元素(html)的字体大小进行设置