CSS尺寸设置单位?

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

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

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

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

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

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

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

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

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

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

    应用场景:适用于固定大小的元素,例如字体大小,边框、图片宽高、容器等。由于它的大小是固定的,不会随着浏览器缩放而改变,因此可以保证设计的准确性。

  2. em:em是相对单位,它是相对于当前元素的字体大小来计算的,因此可以根据父元素的字体大小来自动调整大小,使得网页在不同设备上显示更加一致。例如,如果一个段落的字体大小是16px,那么1em就等于16px。如果一个子元素的字体大小是0.5em,那么它的大小就是父元素字体大小的一半。em的缺点是,如果嵌套层级很深,就会导致计算变得复杂。

    应用场景:适用于相对大小的元素,例如文本、行高、内边距等。

  3. rem:rem也是相对单位,但是它是相对于根元素的字体大小来计算的,因此可以根据根元素的字体大小来自动调整大小,使得网页在不同设备上显示更加一致。在网页设计中,通常将根元素的字体大小设置为16px,这样1rem就等于16px。与em相比,rem的优势在于它不会受到嵌套层级的影响,因此计算更加简单。

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

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

三、补充PT和PC

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

  1. PT(Point):PT是一种相对单位,表示打印机上的点数。在CSS中,1pt等于1/72英寸,因此它在屏幕上的实际大小会随着显示设备的分辨率而有所变化。PT通常用于Web设计中制定打印样式或确定文本尺寸时使用,适用于打印输出。

  2. PC(Pica):PC也是一种相对单位,它是PT的大单位。1PC等于12点(即1/6英寸),因此1PC等于16PT。PC单位在网页设计中很少使用,更多地用于印刷行业。

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


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

相关推荐
万少4 小时前
DeepSeek 昨晚刚开源了 Harness:附万少的2 万字保姆级教程
前端·后端·架构
程序员黑豆6 小时前
Java字符串详解
java·前端·ai编程
无我Code7 小时前
开发者-2026年中总结
前端·面试·程序员
浮生望8 小时前
React 受控与非受控组件:从表单状态管理到实时校验的完整实践
前端
糖墨夕9 小时前
第二章:AI Agent 到底是个啥?—— 用生活场景把概念讲明白
前端
Csvn9 小时前
⚡ content-visibility: auto —— 长页面渲染提速的隐藏神器,白捡的性能优化
前端
用户938515635079 小时前
深入理解 Next.js:从 SPA 的 SEO 问题到约定式路由与 SSR 原理
前端·后端·全栈
snow@li9 小时前
web:前端500知识点/速查手册
前端
kyriewen11 小时前
今年裁了16万技术人——但字节前端岗反而涨了23%
前端·javascript·面试
用户0595401744611 小时前
把 AI Agent 记忆存储验证从 40 分钟手测压到 3 分钟,pytest + Docker 这套组合太顶了
前端·css