CSS尺寸设置单位？

sin...

已于 2023-12-19 20:12:03 修改

阅读量694

点赞数 13

文章标签： css 前端 css3 css单位

于 2023-12-11 19:14:43 首次发布

本文链接：https://blog.csdn.net/weixin_69232086/article/details/134934026

版权

一、css中常用单位有哪些？

共有6个单位，分别是px，em，rem，vw，vh，pt。

① 除了px是绝对单位，其余都是相对单位。

② em相对于他本身的字体大小（但他本身字体大小是相对于父级字体大小的）。

③ rem相对于根元素的字体大小。

④ vw相对于可视化窗口的宽（1vw就是1%窗口宽度）。

⑤ vh相对于可视化窗口的高（1vh就是1%窗口高度）。

⑥ pt：点，是印刷行业中常用的单位。1pt 约等于 1/72 英寸。

二、px、em、rem都是用来表示长度单位的，但它们之间有一些区别：

px：像素（Pixel），是一个相对固定的单位，指屏幕上的一个点。在网页设计中，通常使用px作为长度单位，因为它的大小是固定的，不会随着浏览器的缩放而改变。

应用场景：适用于固定大小的元素，例如字体大小，边框、图片宽高、容器等。由于它的大小是固定的，不会随着浏览器缩放而改变，因此可以保证设计的准确性。
em：em是相对单位，它是相对于当前元素的字体大小来计算的，因此可以根据父元素的字体大小来自动调整大小，使得网页在不同设备上显示更加一致。例如，如果一个段落的字体大小是16px，那么1em就等于16px。如果一个子元素的字体大小是0.5em，那么它的大小就是父元素字体大小的一半。em的缺点是，如果嵌套层级很深，就会导致计算变得复杂。

应用场景：适用于相对大小的元素，例如文本、行高、内边距等。
rem：rem也是相对单位，但是它是相对于根元素的字体大小来计算的，因此可以根据根元素的字体大小来自动调整大小，使得网页在不同设备上显示更加一致。在网页设计中，通常将根元素的字体大小设置为16px，这样1rem就等于16px。与em相比，rem的优势在于它不会受到嵌套层级的影响，因此计算更加简单。

应用场景：适用于相对响应式布局用到的较多些，因为它的计算不会随着嵌套而改变。大小的元素，例如容器、布局等。同时，rem还可以用于设置媒体查询的断点，从而实现响应式设计。

总的来说，px适合用于固定大小的元素，而em和rem适合用于相对大小的元素。在实际应用中，需要根据具体情况选择合适的单位。

三、补充PT和PC

在CSS中，PT和PC是指不同的长度单位。

PT（Point）：PT是一种相对单位，表示打印机上的点数。在CSS中，1pt等于1/72英寸，因此它在屏幕上的实际大小会随着显示设备的分辨率而有所变化。PT通常用于Web设计中制定打印样式或确定文本尺寸时使用，适用于打印输出。
PC（Pica）：PC也是一种相对单位，它是PT的大单位。1PC等于12点（即1/6英寸），因此1PC等于16PT。PC单位在网页设计中很少使用，更多地用于印刷行业。

需要注意的是，PT和PC都是相对单位，它们的具体显示大小会受到用户设备的分辨率、浏览器设置以及字体样式等因素的影响。为了确保在不同设备上的一致性，更常用的是使用像素（px）作为CSS的长度单位，因为像素是屏幕上的最小可见单位，具有固定的显示大小。

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

注意：编写CSS样式时，建议使用相对单位（如em、rem、%）或像素（px），以便在不同设备上获得一致的显示效果。