网站前端制作之css长度单位

来源： All文章

发布时间：2023-06-09 11:31:47

　　关于长度单位，你还只是会使用px吗？让我们来看看如何使用长度单位在页面自适应。

长度单位分绝对长度单位和相对长度单位。
- 绝对长度单位是一个固定的值，它反应一个真实的物理尺寸，绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。
- 而相对长度单位，你看相对二字就可以看出其长度单位他会有一个参考值，会随着它的参考值变化，是一种动态的长度单位，更适合适配不同场景应用。
常用的相对长度单位

像素是最常用的单位，很多长度单位最终都映射成像素，这是显示屏显示内容的基本单位，显示效果与显示分辨率有关

　　像素为影视显示的基本单位，译自英文pixel，pix是英文单词picture的常用缩写，加上英语单词element元素，就得到pixel，故像素表示画像元素之意，有时又被称为pel（pictureelement）。

　　通常说的显示分辨率，其实是桌面设定的分辨率（桌面分辨率）而不是显示屏最大可支持的分辨率（物理分辨率）。

　　列如有一个宽为100px的p标签，在800x600分辨率下占显示面积的1/8，而在1980x1080分辨率下则占据1/19，这也是为什么说它是动态的主要原因。

　　简单来说，px会随着桌面分辨率的变大变小和改变，参考点就是桌面分辨率，在不同桌面分辨率下会显示出不同的效果。目前而已比较流行的还是1920x1080桌面分辨率。

单位em的含义最初是指基于当前字体大写字幕M的尺寸。现代浏览器中，1em等于16px。

　　基于当前元素的font-size大小，如果没设置就是继承父元素的font-size。

　　如果作用于font-size时，1em就等于父元素的font-size。

　　em单位具有级联关系。

　　em会随着font-size的大小改变而改变。

相对于根元素（html）的font-size的计算值

　　默认情况下：1rem=16px，这是因为浏览器的默认字体大小为16px，且html标签的的字体大小不会被轻易修改。

%百分比对于font-size，line-height等属性，基于其父元素的font-size大小。而对于text-indent、margin、padding、width等属性则是基于父元素的宽度。

CSS中有一些用于调整与视图（浏览器页面）大小的单位，这些响应式设计对于设计在不同尺寸屏幕下的网页有很大帮助。

　　一个单位是指视图宽度的1%。

一个单位是指视图高度的1%。

* 文章来源于网络，如有侵权，请联系客服删除处理。