受到Dannie Vinther的代码片段的启发,该片段展示了如何在不使用media queries
的情况下使字体具有响应式功能,我决定制作另一个代码片段,但使用rem
而非像Dannie Vinther所使用的px
。我做了一些更改,但它并没有有效。
这是我的代码:
* {
/* Setting root font size*/
--root-size: 20px;
font-size: var(--root-size, 20px);
/* Typography */
--main-font: 'Slabo 27px', serif;
/* Calculation, Ranges from 421px to 1199px */
--responsive: calc((var(--min-font) * var(--root-size)) + (var(--max-font) - var(--min-font)) * ((100vw - 420px) / (1200 - 420)));
}
h1 {
/* Set max and min font sizes */
--max-font: 2.5;
/* 2.5rem equals to 50px */
--min-font: 1.25;
/* 1.25rem equals to 25px */
font-family: var(--main-font);
font-size: var(--responsive);
}
p {
font-family: sans-serif;
margin: auto;
width: fit-content;
/* Set max and min font sizes */
--max-font: 1;
/* 1rem equals to 25px */
--min-font: 0.7;
/* 0.7rem equals to 14px */
font-size: var(--responsive);
}
@media (min-width: 1200px) {
h1,
p {
font-size: calc(var(--max-font) * var(--root-size));
}
}
@media (max-width: 420px) {
h1,
p {
font-size: calc(var(--min-font) * var(--root-size));
}
}
/* Whatever */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
display: flex;
}
div {
margin: auto;
padding: var(--root-size);
}
a,
a:visited,
a:focus,
a:active,
a:link {
text-decoration: none;
outline: 0;
}
a {
color: skyblue;
transition: .2s ease-in-out color;
}
h1,
h2,
h3,
h4 {
margin: .3em 0;
}
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<div>
<h1>Responsive text with CSS Custom Properties</h1>
<p>Custom Properties <a rel="noopener noreferrer" target="_blank" href="http://caniuse.com/#feat=css-variables">isn't supported</a> by IE.</p>
<p>Inspired From <a href="https://codepen.io/dannievinther/pen/GNExxb?editors=1100">A PEN BY Dannie Vinther</a></p>
</div>
font-size
几乎是不变的。它在 720px
时会发生改变。font-size
当屏幕宽度大于或等于 720px
时变为 50px
,当屏幕宽度小于 720px
时变为 25px
。只有当屏幕宽度从 720px
减少到 420px
时,才会观察到 font-size
的微小变化。我无法找出根本原因,请帮忙解决。谢谢。
--root-size: 20px
,然后继续使用1rem
等同于20px
的概念,但你从未设置 html 元素的字体大小。 - Mr Lister