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

相关推荐
百万蹄蹄向前冲9 分钟前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
朝阳5811 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路1 小时前
GeoTools 读取影像元数据
前端
ssshooter1 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
Jerry2 小时前
Jetpack Compose 中的状态
前端
dae bal3 小时前
关于RSA和AES加密
前端·vue.js
柳杉3 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
lynn8570_blog3 小时前
低端设备加载webp ANR
前端·算法
LKAI.4 小时前
传统方式部署(RuoYi-Cloud)微服务
java·linux·前端·后端·微服务·node.js·ruoyi
刺客-Andy4 小时前
React 第七十节 Router中matchRoutes的使用详解及注意事项
前端·javascript·react.js