css 学习笔记二 使用相对单位

css 学习笔记二 使用相对单位

相信每一个程序员都希望自己写的程序足够健壮，能够应对多种情况的变化，而不是一有什么变化就跑去修改自己的程序(立即放弃写代码)，相信相对单位可以解决你的部分问题

em介绍

em是最常见的相对单位，1em就代表着当前元素的字号，2em代表着当前元素字号的两倍。

常见的em用法

最常见的用法是利用em设置font-size, padding, border-radius等，这样根据字号大小的不同，css能做出相对应的响应.

rem 介绍

如果你想利用em来定义多重嵌套的元素的字号时，可能会发生意想不到的情况，例如：

<ul>
  <li>Top level
    <ul>
      <li>Second level
        <ul>
          <li>Third level
            <ul>
              <li>Fourth level
                <ul>
                  <li>Fifth level</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

这是因为em总是利用父元素的字号计算自己的字号大小，为了解决这个问题，就可以使用rem，rem会计算根元素的的大小来决定自己的大小，而不是父元素。

使用vmin设置正方形元素的大小

vmin是指的窗口较小的一条边的大小，除此之外，还有

• 1vh 窗口高度的 1/100
• 1vw 窗口高度的 1/100
• 1vmax 宽，高中较大的一方的1/100
• 1vmin 宽，高中较小的一方的1/100

如果你想定义一个正方形，只需要

.square {
    width: 90vmin;
    height: 90vmax;
    background: red;
}

使用calc( )定义字号

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

calc可以计算括号中的数值， 如此一来，用0.5em来保证最小的字号。随着浏览器窗口的大小变化， vw可以保证字号随着窗口大小的变化而随之变化。

一个无关相对值的内容

css中的自定义属性

例如：

:root {
    --main-font: sans-seif, Arial;
}

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

如例中所示，定义变量前要用--，使用时要用var()包围住变量名,并且var中可以接受第二个参数，若第一个参数变量未定义，则使用第二个参数。