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),以便在不同设备上获得一致的显示效果。

相关推荐
架构技术专栏8 小时前
Agent 工具调用:从工具声明到执行反馈
前端·人工智能·后端
别动我齐刘海8 小时前
C++ 工程化学习
java·linux·前端·c++·学习·机器学习·机器人
志尊宝9 小时前
Vue3 零基础每日笔记(071):暗黑模式与主题切换——CSS 变量 + Element Plus 暗黑方案
前端·css·笔记·vue·html·前端开发·软件开发
刘发财10 小时前
前端如何生成10000页PDF文件?
前端·javascript·开源
A接拉起00710 小时前
2026 年 JavaScript 开发者需要了解的知识
前端·javascript·后端
用户114818678948410 小时前
面试官:大屏项目里十几个模块同时渲染上万条数据,怎么做到不卡?
前端·性能优化
前端市界11 小时前
Pro React Admin: 统一工程底座,承载多种应用...
前端·github
葡萄城技术团队11 小时前
dsh-spreadjs-editor 当前支持什么:安装前需要了解的几件事
前端
沫璃染墨11 小时前
《Qt从零入门系列(十三):QSS样式表详解——从选择器与层叠规则到控件美化实战》
开发语言·css·c++·qt·ui·qt6.3·qss
三*一11 小时前
优化修整算法
前端·javascript·算法