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

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/1001vw 窗口高度的 1/1001vmax 宽，高中较大的一方的1/1001vmin 宽，高中较小的一方的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中可以接受第二个参数，若第一个参数变量未定义，则使用第二个参数。