cssz中的值与单位

前言

在平时的日常编码过程中，对于css属性的使用也仅仅是停留在了简单使用的阶段，但如果出现新的未曾见过的css单位或者比较少用的单位时，则一脸懵逼，也不知道这个单位以及它的值是用来作甚的，
目前个人这边的方式是闭着👀开浏览器调试模式，然后按照可视化所看到的效果进行简单的调试，也没有去深究其中的一个原理，作为想要在前端领域精进的一名贫穷孩子，我觉得有必要去了解其中的
一个原理，以使自己能够对自己/别人所编写的代码更加的熟悉，造就像以前编写Android代码的布局一样，编写一次即可完成80%～90%的界面效果，且兼容到大部分的机型！！！

全局关键字

全局关键字，指的是所有的css属性均可以使用的属性值

inherit: 把元素某个属性的值设置为与父元素同一属性的值一样，也就是强制从父元素那边继承属性过来
initial: 把属性的值设置为预定义的初始值，相当于”重置”属性值
unset: 作为inherit与initial关键字的替身，对于继承的属性来说，unset的作用与inherit一样，对于不继承的属性来说，unset的作用与initial一样

针对上述3个关键词仅能够使用的属性：all

all 代表除了direction和unicode-bidi之外的所有属性。
如果为一个元素声明all: inherit，代表的意思是从父元素中继承除了direction和unicode-bidi之外的任何属性

距离/长度

在css中很多属性需要长度度量才能够显示出正确的位置、大小，一般的，长度值用正数或者负数来表示，一般需要在长度后面跟着一个单位，然后有唯一的一个例外：
0，无须跟随单位
长度单位可分为🈶️两种：绝对长度单位和相对长度单位

绝对长度单位

绝对长度单位，都有以下几个：

单位	英文	描述
英寸	in	美国尺子所用的单位
厘米	cm	-
毫米	mm	-
四分之一毫米	q	-
点	pt	一个标准的印刷度量单位，一般来说，1in=72pt
派卡	pc	属于印刷术语，1pc=12pt，1in=6pc
像素?	px	像素是屏幕上的小点，但比较抽象
-由于媒体查询以及响应式设计，出现了以下几个新的单位-	-	-
点每英寸	dpi	在长为1英寸的范围内能显示的点数，可以指打印机/LED/电子墨水屏幕输出的点
点每厘米	dpcm	与dpi类似，不错计量单位是cm
点每像素	dppx	css中每个px单位显示的点数

px

相对长度单位

相对长度单位中的”相对”一般是相对于其他元素(比如节点本身)的，一般不受其他因素所影响的，比如屏幕分辨率、视区宽度、用户的偏好设置等等，另外，有些相对单位的实际尺寸始终相对于当前元素！！！

单位	描述
em	1em = 所用字体中小写字母m的宽度
ex	1ex = 所用字体x的宽度
rem	相对于根结点即`html`中的比例
ch	所用字体中一个0⃣️的进宽
-与视区相关的单位-	根据视区的尺寸来计算，比如浏览器窗口、可打印区域、移动设备的显示屏
vw	根据视区宽度计算，然后除以100，以宽度占据多少份来计算，会随着视区宽度变化而变化
vh	与vw类似，只不过是以视区高度计算
vmin	视区尺寸最小值单位，比如视区为：900x600px，那么1vmin=6px;
vmax	同vmin，只不过取最大尺寸作为视区

以下针对上述其中几个进行具体描述

em

理论上，1em = 所用字体中小写字母m的宽度，这样就是em的名称的由来
按照css的定义，1em = font-size的属性值。如果font-size的属性值为14px，那么对应的1em就是14像素

rem

rem与em类似，不过它是以根结点html来作用参照物的
在实际的项目开发中，我们采用rem布局的方式，是获取当前浏览器的像素以及比例，根据UI提供的高保真效果图，来对应计算出rem所参照物html的字体大小，并以此来计算出系统中所有页面元素的字体大小、长度、间距的一个比例rem值，
从而来实现所有的设备都采用的同一个展示效果。

计算值[calc函数]

一句话理解：在允许使用数值的地方，都允许使用calc计算函数，通过数学计算(加减乘除以及括号)来计算元素的数值

⚠️ 关于calc的一个使用限制

+号和-号两侧的值必须使用相同的单位类型，也就是要么同样是number类型，要么是integer，或者同样是长度单位(比如：calc(1em + 20px));
*号计算的两个值中必须有一个是number类型的
/号计算的两个值右边的那个必须是number类型；
/号右边的值不能为0⃣️，这也是数学的基础

自定义值[var变量]

css中允许我们通过创建一个变量，然后在我们的样式中来使用这个变量，从而做到统一的切换控制，比如整体调整元素的字体大小、系统主题等等！

以下是对应的一个使用

html{
    --base-color: #674;
    --highlight-color: #987;
}
h1{
    color: var(--base-color);
}
h2{
    color: var(--highlight-color);
}

提出疑问🤔️

针对习得到的关于css的单位以及尺寸的知识，在平时我们开发过程中，最经常遇到的一个问题就是：
哎呀，你看这个效果在我界面上是好好的吖，跑到你的显示器上就成了一坨💩了，那么如何从根本上来解决这个问题呢？

1、关于px、dpi、ppi等单位的一个转换规则

🤔 分辨率与物理尺寸关系
👉 目前绝大部分显示器都是基于点阵的，通过一系列的小点排列成一个大矩形，且每一个小点都用不同的颜色来形成的，这里我们称每一个小点为像素(pixel)，在具体的一块显示器下，在一个具体的设置下，总像素的个数是固定的，
我们将显示器有多少行多少列叫做当前显示器的分辨率，表示方法是”宽度像素个数x高度像素个数”

比如🈶️以下的不同的屏幕尺寸

而屏幕中的分辨率如下：

✨ 从上述可以得知，像素(px)其实已经不是一个绝对长度单位了，而是一个相对长度单位了，因为在同样一块屏幕中它的分辨率可以是不一样的！！！

👉 同样分辨率下，每个小点的尺寸仍然是可大可小的
同样是1000个点，如果每个点占据1毫米，那组成的矩形就是100厘米的，如果每个点占据1厘米，那组成的矩形就会是10米的，对于一台具体的显示器，将这些点排列起来，形成的一个整体的高度和宽度，就称之为”物理尺寸”，
单位是”宽度x高度”

👉 点每英寸(dpi)
不同的显示器分辨率不一样，物理尺寸也不一样，因此用一张一英寸长的小纸条按在屏幕上，能被盖住的像素的个数也是不一样的
这里我们把一英寸里能包含的像素的个数叫做屏幕的解析度，单位叫dpi(dots per inch)

👉 像素每英寸(ppi)
屏幕常用ppi来判定屏幕清晰度，ppi越高，每英寸像素点越多，图像越清晰；我们可以类比物体的密度，密度越大，
单位体积的质量就越大，ppi越高，单位面积的像素越多。
这里我们使用iphone4来计算其ppi
![iphone ppi计算公式](iphone ppi计算公式.jpeg)

✨ 从上述公式中，我们可以得出对于固定尺寸的设备，ppi值越大，所能够容纳的物理像素越多，绘制出来的图像也就越精细，而物理像素越多

👉 转换关系
物理长度转换成像素个数时，根据屏幕的解析度(dpi(点每英寸))计算每英寸对应多少个像素点，然后根据像素点显示物理长度。
比如有一下的一个场景：要在屏幕上显示1cm长的线，先将1cm转换为0.3937in，然后根据屏幕的解析度dpi，每in对应于120个像素，因此1cm就是47.244px

👉 物理像素比
物理像素点是指屏幕显示的最小颗粒，是真实存在的，如屏幕分辨率2560*1600是指横向有2560个像素点纵向有1600个像素点。
*在开发时使用的px单位称为逻辑像素(CSS像素)*，逻辑像素与物理像素之间存在一个比例关系，以前是1:1一般，现在基本上是1个逻辑像素就拥有n个物理像素。
一般的，我们可以通过window.devicePixelRatio，见如下所示：

🤔 为什么早起的1物理像素=1逻辑像素呢？
👉 retina(视网膜技术)可以将更多的物理像素压缩到一块屏幕内，从而达到更高的分辨率，提高屏幕的细腻度

2、多倍图以及实际使用

在标准viewport设置中，使用多倍图提高图片质量，解决高清设备中的模糊问题。
如果pc端需要一个50x50的图片，通常准备像素为100x100的图片，再手动将图片缩小到50x50，实际准备的图片是实际需要的两倍，这就是两倍图

原理：一个200×300(CSS pixel)的img标签，对于dpr=2的屏幕，用400×600的图片，如此一来，位图像素点个数就是原来的4倍，在Retina屏幕下，
位图像素点个数就可以跟物理像素点个数形成 1 : 1的比例，图片自然就清晰了

✨ 最佳实践：不同的dpr下，加载不同的尺寸的图片。不管是通过CSS媒体查询，还是通过JS条件判断都是可以的

2、打印机打印效果设置实战

👉 打印代码要确定一个像素有多少个点，这样子才能够精确根据看到的效果进行打印出内容！！！

使用媒体查询(media query)针对打印样式进行设置
1
2
@media print {
}
一般来说，无须重新编写针对打印机样式，只需要针对差异设置的样式覆盖调之前的默认样式即可;

为了达到最佳效果，使得颜色清晰明了，需要设置以下最基本的打印样式：

@media print {
    body{
        color: #000;
        background: #fff;
    }
}

在编写打印样式表的时候，⚠️需要使用厘米或者英寸作为单位而不是使用屏幕像素单位，实际的单位对打印非常有用
为了保证打印样式有用，写css样式使打印的内容距离纸张边缘，看起来更好，需要使用@page语法
为了保证不被跨页打印，比如一个标题和内容被分开，可以使用page-break-after: avoid;
如果有图片的话，需要放置图片过宽超出纸张边缘，因此需要对图片使用max-width: 100% !important;

3、是否有这样的一个机制，能够做到在不同屏幕尺寸、分辨率下的一个展示同样的效果，兼容到三方的库中

rem布局、深入调整三方库
根据三方库提供的混入机制，进行一个基础样式的改写；