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(像素) 『常用』

像素是最常用的单位,很多长度单位最终都映射成像素,这是显示屏显示内容的基本单位,显示效果与显示分辨率有关

😤像素为何为相对定位?

对于像素是否为绝对单位或则是相对单位,这个的歧义比较大,在探究这个问题之前应该先来了解一下像素是个什么东西。

  • 像素为影视显示的基本单位,译自英文 pixelpix 是英文单词 picture 的常用缩写,加上英语单词 element 元素,就得到 pixel,故像素表示 “画像元素” 之意,有时又被称为 pel (picture element)
  • 通常说的显示分辨率,其实是桌面设定的分辨率(桌面分辨率)而不是显示屏最大可支持的分辨率(物理分辨率)。
    列如有一个宽为 100pxdiv标签,在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-sizeline-height 等属性,基于其父元素的 font-size 大小。而对于 text-indentmarginpaddingwidth等属性则是基于父元素的宽度。

6、ch
chex 类似,不同的是 ch 是指当前字体数字 0,当无法确定数字 0 宽度时,取 em 值的一半作为 ch 值。

7、vw(viewpoint width ⇨ 视窗宽度) 『常用』

CSS 中有一些用于调整与视图(浏览器页面)大小的单位,这些响应式设计对于设计在不同尺寸屏幕下的网页有很大帮助。

一个单位是指视图宽度的 1%

8、vh(viewpoint height ⇨ 视窗高度) 『常用』
一个单位是指视图高度的 1%

9、vmin 和 vmax

在移动端开发时,横屏和竖屏下的显示的大小都不一样,为了解决这个问题,需要使用到 vminvmax 。要不用最小的,要不用最大的,使大小在横竖屏下保持一只。


四、部分相对长度单位差别

1、%号与vw、vh的差别

  • % 是相对于父元素大小设定的比率,vwvh 是视图大小所决定的,两者的参照点不同。
  • vwvh 的优势在于能够直接获取宽高。

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、自适应背景

使用 vhvw 可以自适应页面大小,为页面添加自适应背景更加能体现其妙用。

<!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.2rem2rem2.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的详解与区别