Unit2-相对单位

Css in depth 第二章学习笔记

接下来开始相对单位的学习啦，因为对于小幸运这种大量适配移动端的网页项目来说，是肯定不能用px这种单位的，直接盲目的学这些相对单位，包括@medium啥的卡了好久，这章节算是帮我捋清了很多东西。

em和rem

em

em是最常见的相对单位，适于基于特定字号进行排版，在CSS中，1em就等于当前元素的字号。
浏览器中默认的字体字号是16px,也就是说再不进行层叠的情况下，1em的值就是16px。其实就是

    body{
        font-size: 16px;
    }

其余后代元素的font-size会继承这一字号大小(再不加上声明的情况下，这些后代元素也可以用em来定义)，但em会有问题，比如嵌套列表，要不断的用1em覆盖继承来的font-size大小才能解决这一问题，所以我们有更好的选择 rem

rem

rem,字面上看就是root em,也就是说所有rem都是相对于祖元素的font-size来说的，就不用担心继承的问题了。在DOM树中，html元素是顶级(根)节点，它下面是子节点head和body，再后面就是逐层嵌套的后代节点。根节点是所有其他元素的祖先节点，它有一个伪类选择器(:root)，可以用来选中自己。:root{} === html{}。
rem虽然好用，但不是万能的，书里说，CSS关于所有问题的答案只有一种: 看情况。 (真的麻了)
所以书里也帮我们总结了一条规律呀:

rem设置字号，px设置边框，em设置其他大部分属性

反模式

这为什么叫反模式我也不清楚，总之就是把默认字号设置成10px(0.625en)，这样就方便计算了，比如什么14px就是1.4em啊啥的，书里不推荐这种方法，因为这其实还是像素思维，脑子里想的一直是大概要多少像素然后写出em，这样其实就根本没有用em的必要，我们用相对单位就是为了在响应式开发中引入一个模糊的概念，也就是到底多少像素不重要，只要在适配屏幕的过程中字体大小等看着舒服就行。书上就说是在跟设计师先规定好根元素的字号后(通常是类似于标题或者页脚的字号)，然后在相对于的地方进行计算。
这里就推荐Vscode里面的一个插件！ px to rem & rpx 这样编译器会自动帮我们计算哈，偷懒第一人(dog)

构造响应式面板

顾名思义，就是根据屏幕尺寸的大小来改变网页的字号大小，用媒体查询@media来实现，书上说后面的章节会详细介绍，这里就先不写那么多了。

视口相对单位

基本概念

先明白视口的概念:就是浏览器的可视窗口，不包括什么地址栏啊工具栏啊什么的。
视口单位有四种:

    vh: 视口高度的1/100
    vw: 视口宽度的1/100
    vmin: 视口宽/高较小的1/100
    vmax: 视口宽/高较大的1/100
    vmin/vmax 用于手机竖屏和横屏变化的情况

calc()函数

视口单位一般用于定义div啥的，定义字号会很麻烦，比如屏幕贼大的时候字贼大，屏幕贼小的时候字又贼小，所以为了避免这些极端情况，我们就可以用上calc()函数，该函数内可以对两个极其以上的值进行基本运算，也能结合不同单位。
比如：

:root{
    font-size: calc(0.5em + 1vw)
}

这样就可以保证字体有0.5em的下限不会过小，又有1vw可以随着屏幕增长平滑过渡

其他

无单位的值

有些属性允许无单位，比如line-height,z-index,font-weight(700为bold，400为normal)，而line-height的无单位数值也是相当于字号的相对值，而加上单位可能会出现文字重叠的问题，所以最好不好给行高添加单位

自定义属性(即CSS变量)

所谓自定义属性，又叫CSS变量，我们可以声明一个自定义属性，就可以在样式表中的其他地方引用这个值。
我们可以这么定义和引用自定义属性

:root{
    --mian-font: Arial,Helvetica;
}

p{
    font-family: var(--main-font);
}

自定义属性的真正意义在于它能够层叠和继承，可以在多个选择器中定义相同的变量，这个变量在不同地方有不同的值。
(感觉把这个东西放在react里面用会很高级)

第二章的笔记就到这了，也只是笼统的概述了一下，具体要看后续的学习和实操响应式开发吧，继续加油