CSS 长度单位的详解『你还是只会使用PX吗?(╬▔皿▔)╯』
Posted XianZhe_
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS 长度单位的详解『你还是只会使用PX吗?(╬▔皿▔)╯』相关的知识,希望对你有一定的参考价值。
CSS 长度单位的详解『你还是只会使用PX吗?』
文章目录
一、CSS的长度单位🥣
CSS中有相当一部分属性的值是需要使用到长度,而说到长度就一定会有长度单位的出现,长度单位在CSS中并不是统一的。
CSS的长度单位主要分为绝对长度单位和相对长度单位。
二、绝对长度单位
绝对长度单位是一个固定的值,它反应一个真实的物理尺寸,绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)。
由于这是趁于真实的绝对长度单位,往往不利于页面渲染,这些绝对长度单位使用场景更多是用于印刷、打印等行业。
1、in(英寸)
英尺或呎(英语:Foot,符号:ft),是英制长度单位,为英国与英联邦的长度单位。
2、cm 厘米
厘米(台湾作公分)是十进制长度计算单位,符号为cm。
3、mm 毫米
毫米(法语:millimètre;英式英文:millimetre,美式英文:millimeter),符号 mm,是长度单位,台湾称为“公釐”、“公厘“或“毫米”,中国大陆称为毫米。
1毫米相当于千分之一米(10-3,此即为“毫”的字义),或十分之一厘米。
4、pt(point 点)
点(英文pica)是印刷行业使用的最小长度单位,也被称为网点。
5、pc (picas 派卡)
派卡(英文:pica)是印刷行业使用的长度单位。通常,派卡使用大写字母 P
表示,有时会在后面加上斜线,而 “点” 使用小写字母p表示。在层叠样式表中(CSS),派卡写 PC
,等于 1/6 英寸。
6、q(quarter-millimeters 四分之一毫米)
顾名思义,1q
等于四分之一毫米。
7、对照表
in 英寸 | cm 厘米 | mm 毫米 | q 四分之一毫米 | px 像素(300分辨率) |
---|---|---|---|---|
1in | 2.54cm | 25.4mm | 6.35q | 300px |
三、相对长度单位🤩
相对长度单位,主要体现在相对二字,表明了其长度单位会随着它的参考值的变化而变化,是一种动态的长度单位,更适合适配不同场景应用。
1、px(像素) 『常用』
像素是最常用的单位,很多长度单位最终都映射成像素,这是显示屏显示内容的基本单位,显示效果与显示分辨率有关
😤像素为何为相对定位?
对于像素是否为绝对单位或则是相对单位,这个的歧义比较大,在探究这个问题之前应该先来了解一下像素是个什么东西。
- 像素为影视显示的基本单位,译自英文
pixel
,pix
是英文单词picture
的常用缩写,加上英语单词element
元素,就得到pixel
,故像素表示 “画像元素” 之意,有时又被称为pel (picture element)
。 - 通常说的显示分辨率,其实是桌面设定的分辨率(桌面分辨率)而不是显示屏最大可支持的分辨率(物理分辨率)。
列如有一个宽为100px
的div
标签,在800x600分辨率下占显示面积的1/8,而在1980x1080分辨率下则占据1/19,这也是为什么说它是动态的主要原因。 - 简单来说,px会随着桌面分辨率的变大变小和改变,参考点就是桌面分辨率,在不同桌面分辨率下会显示出不同的效果。目前而已比较流行的还是1920x1080桌面分辨率。
2、em
单位 em 的含义最初是指基于当前字体大写字幕 M
的尺寸。现代浏览器中,1em
等于 16px
。
- 基于当前元素的
font-size
大小,如果没设置就是继承父元素的font-size
。 - 如果作用于
font-size
时,1em
就等于父元素的font-size
。 em
单位具有级联关系。em
会随着font-size
的大小改变而改变。
3、rem 『常用』
相对于根元素(html)的 font-size
的计算值
默认情况下:1rem=16px
,这是因为浏览器的默认字体大小为 16px
,且<html>
标签的的字体大小不会被轻易修改。
4、ex 『常用』
最初是指所用字体中小写字母 x
的高度, 不同字体字母 x
的高度可能不同。但在大部分浏览器中,ex
将取值为 em
的一半
5、%(百分比) 『常用』
% 百分比对于 font-size
,line-height
等属性,基于其父元素的 font-size
大小。而对于 text-indent
、margin
、padding
、width
等属性则是基于父元素的宽度。
6、ch
ch
与 ex
类似,不同的是 ch
是指当前字体数字 0
,当无法确定数字 0
宽度时,取 em
值的一半作为 ch
值。
7、vw(viewpoint width ⇨ 视窗宽度) 『常用』
CSS 中有一些用于调整与视图(浏览器页面)大小的单位,这些响应式设计对于设计在不同尺寸屏幕下的网页有很大帮助。
一个单位是指视图宽度的 1%
。
8、vh(viewpoint height ⇨ 视窗高度) 『常用』
一个单位是指视图高度的 1%
。
9、vmin 和 vmax
在移动端开发时,横屏和竖屏下的显示的大小都不一样,为了解决这个问题,需要使用到 vmin
和 vmax
。要不用最小的,要不用最大的,使大小在横竖屏下保持一只。
四、部分相对长度单位差别
1、%号与vw、vh的差别
%
是相对于父元素大小设定的比率,vw
和vh
是视图大小所决定的,两者的参照点不同。vw
和vh
的优势在于能够直接获取宽高。
2、字体相关长度单位
em、ex、ch、rem 为字体的相对单位。
3、视图相关长度单位
vw、vh、vmin、vmax 为视图的相对单位。
五、相对长度的应用
1、字体大小级联
利用 em
级联关系可以更加方便的管理特定部分页面内容。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#content
width: 500px;
height: 200px;
font-size: 18px;
border: 1px solid #333333;
.title
font-size: 2em;
margin: 0 0 10px 0;
.info span:nth-of-type(1)
font-size: 1.2em;
margin-bottom: 5px;
display: block;
.info span:nth-of-type(2)
font-size: 0.9em;
display: block;
</style>
<body>
<div id="content">
<h2 class="title">罗翔</h2>
<div class="info">
<span>中国政法大学刑事司法学院教授、刑法学研究所所长</span>
<span>2020年3月9日应邀入驻bilibili,两天粉丝超过百万,半年粉丝量突破千万。</span>
</div>
</div>
</body>
</html>
2、自适应背景
使用 vh
和 vw
可以自适应页面大小,为页面添加自适应背景更加能体现其妙用。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*
margin: 0;
padding: 0;
#content .skin
width: 100vw;
height: 100vh;
background: url("./images/背景_普大109.png") no-repeat;
background-size: 100vw 100vh;
</style>
<body>
<div id="content">
<div class="skin"></div>
</div>
</body>
</html>
3、快速定义字体大小
因为 1 rem = 16 px,只要掌握整个换算公式就可以快速定义字体的大小,如使用 1.2rem
、2rem
、2.8rem
这些大小快速排版。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*
margin: 0;
padding: 0;
#content
width: 600px;
border: 1px solid #333333;
#content p
font-size: 2rem;
#content .info
font-size: 1.3rem;
</style>
<body>
<div id="content">
<p>艾尔登法环</p>
<p class="info">《艾尔登法环》(英语:Elden Ring,日语:エルデンリング)是一款由日本开发商From Software开发、
Bandai Namco发行的黑暗幻想风格动作角色扮演游戏。于2022年2月25日于Steam、Microsoft Windows、PlayStation
4、PlayStation 5、Xbox One、Xbox Series X/S上发行。</p>
</div>
</body>
</html>
参考资料🥪
相关博客🙈
以上是关于CSS 长度单位的详解『你还是只会使用PX吗?(╬▔皿▔)╯』的主要内容,如果未能解决你的问题,请参考以下文章