前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >前端的长度单位有哪些

前端的长度单位有哪些

作者头像
程序媛夏天
发布于 2024-01-18 13:03:17
发布于 2024-01-18 13:03:17
3460
举报

首先在前端开发中,会遇到各种不同类型的长度单位,而整体的长度单位分为两大类:绝对长度和相对单位。

1.绝对单位
1.px 像素(Pixel)

px 的最小单位是1,所以小数的度量没有意义

2. pt(point镑)

物理长度单位。指的是72分之一英寸。pt=1/72(英寸),px=1/dpi(英寸)

2.相对单位
1.em

相对于所在容器的font-size属性,若自身没有设置font-size属性,则相对于浏览器的默认字体尺寸。 一般浏览器默认字体大小是16px, 则1em = 16px, 2em = 32px

2.rem

相对于整个html的font-size属性。

3.vw vh

对于视窗(viewpoint)的宽度或者高度。1vw等于视窗宽度的1%,1vh等于视窗高度的1%。 视口被均分为100单位的vw,若屏幕宽375px,1vw=3.75px;视口被均分为100单位的vh,屏高1200px,1vh=12px;

4. %百分比
5.vmin 和 vmax

vmin是当前 vw 和 vh 中较小的一个值,vmax是当前 vw 和 vh 中较大的一个值。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-01-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序布局单位的使用
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。官方推荐微信小程序可以用iPhone6 作为视觉稿的标准。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为750 px,则共有个750 物理像素,则750 rpx = 375px = 750 物理像素 例如 : 1rpx = 0.5px = 1物理像素
用户2305175
2018/06/24
3.2K0
深度解析CSS中的单位以及区别
css中有几个不同的单位表示长度,使用时数字加单位。如果长度为0,则可以省略单位。
呆呆
2021/09/29
4800
CSS中常见的长度单位
注意: (1)字体的尺寸指的是什么? 字体大小是指字在屏幕或印刷介质上表现出来的大小,将每个字看作方块,按方块的对角线长度计算大小。
恋喵大鲤鱼
2018/08/03
1.3K0
css 文字自适应大小_div自适应窗口大小
css3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等。
全栈程序员站长
2022/09/20
3.6K0
【说站】css样式单位px,em,pt,ex,pc,in,mm,cm详解
在写css样式的时候最常用的长度单位是px(像素),除此之外经常会碰到em、pt等等。
很酷的站长
2022/11/24
3K0
【说站】css样式单位px,em,pt,ex,pc,in,mm,cm详解
CSS 你到底有多少长度单位?
听说糙着干活的只靠 px 和 % 闯天下,不知道在看文章的你是不是也是其中一员,哈哈哈哈
全栈程序员站长
2022/06/30
4890
前端:CSS字体大小 px、em、rem的区别
1px的长度表示显示器中一个像素(pixel)的长度,实际显示的效果和显示器的 DPI(Dot Per Inch,每英寸像素数)有关,DPI越大每英寸的像素数越多,每个像素的实际大小越小。通常来说分辨率越高的屏幕 DPI也就越高,所以高分辨率屏幕显示的图标和字体都要更小一些。
渔父歌
2020/03/26
2.2K0
css中使用calc()计算宽高
calc()是什么? 简单来说就是CSS3中新增的一个函数,calculate(计算)的缩写。用于动态计算宽/高,你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等,
用户1088318
2025/05/21
1130
再看CSS长度单位使用,做到胸有成竹
涉及到网站需同时兼容 PC 和移动端情况更甚:px、百分比、em、rem、vw etc.
掘金安东尼
2024/01/28
2670
响应式网站应该如何选择 CSS 单位?
在开发需要适配各种设备的响应式网站时,正确了解的 CSS 范围很重要。在做具体的决策之前,我们对它们先分个类:
ConardLi
2021/09/08
2K0
响应式网站应该如何选择 CSS 单位?
一文读懂 CSS 单位
说起CSS单位,我们最熟悉的可能就是像素单位(px),它是一个绝对单位,也就是说一个10px的文字,放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。CSS中单位的形式有很多种,下面就分别来看看这些单位。
用户8921923
2022/10/24
1.2K0
一文读懂 CSS 单位
CSS:绝对单位、相对单位
我们对单位很熟悉,比如说,千克,千米,米等,这些就是绝对单位,我们又有听到太阳的质量等于33个地球,这个就是相对单位。在CSS中,单位也可以分为这两类。
Jean
2021/10/23
2.2K0
CSS:绝对单位、相对单位
如何决定响应式网站的 CSS 单位?
我们可以将这个单位用于边距和填充,因为它可以让我们根据元素的字体大小在框周围使用灵活的间距。元素 font-size 会根据设备大小而变化,因此元素周围的间距也将分别发生变化。
海拥
2021/08/23
1.2K0
如何决定响应式网站的 CSS 单位?
CSS常用单位
CSS的长度单位主要有%、px、in、cm、ch、mm、ex、pt、pc、em、rem、vw、vh、vmin、vmax,按照单位的计算方式大致可以分为绝对长度单位、相对长度单位、百分比单位。
WindRunnerMax
2020/08/27
1.6K0
CSS入门13-单位详解
(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)
love丁酥酥
2018/08/27
6780
CSS入门13-单位详解
春眠不觉晓,vh、vw、vmin、vmax 知多少
介绍一些 CSS3 新增的单位,平时可能用的比较少,但是由于单位的特性,在一些特殊场合会有妙用。
Javanx
2019/09/04
1.2K0
CSS 尺寸单位概述
CSS 提供了多种指定元素大小或长度的方式,其中一些更为直观。CSS 单位可分为四大类:
chuckQu
2023/11/22
5680
CSS 尺寸单位概述
IT课程 CSS基础 021_值类型、单位、大小、颜色
在CSS中,长度单位用于表示尺寸和距离,可以应用于各种属性,如宽度、高度、边距、填充等。
zhaoJian.Net
2024/04/03
2050
CSS3 的视口单位vw、vh实现自适应(带有px,em,rem的简单介绍)
px其实就是像素的意思,全称pixel,也就是图像的基本采样单位。对于不同的设备,它的图像基本单位是不同的,比如显示器和打印机。而我们通常所说的显示器分辨率是指桌面设定的分辨率,不是显示器的物理分辨率,但是现在我们的桌面分辨率和物理分辨率几乎是一致的,因为这样显示效果最佳。所以总的来说px就是对应我们显示器的分辨率。这样就会有个问题就是如果使用px的话我们就要根据不同电脑的分辨率来做自适应,有点麻烦。
李洋博客
2021/06/15
2.3K0
长度单位、calc() 表达式
(adsbygoogle = window.adsbygoogle || []).push({});
双面人
2019/07/15
8580
相关推荐
微信小程序布局单位的使用
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档