我最近发现了数字设计师安迪·克拉克(Andy Clarke)的个人网站StuffAndNonsense.co.uk,其中涉及到一些我之前不知道的网页技术,让我感到惊讶。
我研究了一下样式,找到了这段代码:
我研究了一下样式,找到了这段代码:
:root {
--font-family: tondo_rg,sans-serif;
--font-family-light: tondo_lt,sans-serif;
--font-family-bold: tondo_bd,sans-serif;
--font-weight: 400;
--font-size-xxx-display: 8vmin;
--font-size-xx-display: 4.11rem;
--font-size-x-display: 3.653rem;
--font-size-display: 3.247rem;
--font-size-xxxx-large: 2.887rem;
--font-size-xxx-large: 2.027rem;
--font-size-xx-large: 1.802rem;
--font-size-x-large: 1.602rem;
--font-size-large: 1.424rem;
--font-size-medium: 1.266rem;
--font-size: 1.125rem;
--font-size-small: 1rem;
--font-size-x-small: .889rem;
--font-size-xx-small: .79rem;
--lineheight-text: 1.5;
--lineheight-heading: 1.3;
--color-background: #fff;
--color-background-selection: #f0f2f3;
--color-border: #cacfd5;
--color-text-default: #0b1016;
--color-text-alt: #95a0ac;
--color-base: #f4f5f6;
--color-accent: #ba0d37;
--color-logo-enamel: #ba0d37;
--color-logo-highlight: #fdfdfd;
--color-logo-metal: #cacfd5;
--color-logo-lettering: #fff;
--color-logo-type: #0b1016;
--color-text-link: #2c4159;
--color-text-link-active: var(--color-text-link);
--color-text-link-focus: var(--color-text-link);
--color-text-link-hover: var(--color-accent);
--color-text-link-visited: var(--color-text-link);
--color-button-default: #2c4159;
--color-button-alt: #243449;
--color-button-border: #8586a4;
--color-button-shadow: #ecedee;
--border-radius-x-small: .25rem;
--border-radius-small: .5rem;
--border-radius-medium: .75rem;
--border-radius-large: 1rem;
--border-radius-circle: 50%;
--border-width-hairline: .5px;
--border-width-thin: 1px;
--border-width-thick: 2px;
--grid-gap: 4vw;
--max-width: 92rem;
--spacing-xx-small: .125rem;
--spacing-x-small: .25rem;
--spacing-small: .5rem;
--spacing: .75rem;
--spacing-medium: 1rem;
--spacing-large: 1.5rem;
--spacing-x-large: 2rem;
--spacing-xx-large: 3rem;
--duration-instantly: 0;
--duration-immediately: .1s;
--duration-quickly: .2s;
--duration-promptly: .5s;
--duration-slowly: 1s;
}
我感到非常困惑。我不仅从未见过以--
为前缀的CSS属性,而且我从未见过像font-size-xx-large: 1.802rem;
这样的东西。这是做什么用的?我尝试了谷歌搜索(甚至必应搜索),但无济于事。