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分辨率）
1in2.54cm25.4mm6.35q300px

三、相对长度单位🤩

相对长度单位，主要体现在相对二字，表明了其长度单位会随着它的参考值的变化而变化，是一种动态的长度单位，更适合适配不同场景应用。

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吗？(╬▔皿▔)╯』的主要内容，如果未能解决你的问题，请参考以下文章

css中的pxemrem 详解

Android 中的长度单位详解

详解CSS中的几种长度pxempt

CSS长度单位中的负长度值

css px em rem % vw vh vm 区别

px em rem的详解与区别