受此启发后Pen By Dannie Vinther这展示了如何在不使用 media queries
的情况下使字体响应,我决定再做一个 Pen ,但使用 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
变为等于 50px
,当屏幕 width
大于或等于 720px
时。当屏幕 宽度
小于 720px
时,25px
。当屏幕 width
从 720px
减小到 420px
时,font-size
的变化很小。
我无法找出根本原因。请帮忙。 谢谢。
最佳答案
您的公式不正确。如果我们考虑这部分:((100vw - 420px) / (1200 - 420))
我们会有0px
当 100vw 等于 420px 且 1px
当等于 1200px 时。然后乘以 (var(--max-font) - var(--min-font))
等于1.25
对于 h1
所以基本上你的值介于 0px
之间和 1.25px
如果我们添加主要部分((var(--min-font) * var(--root-size))
),我们将得到一个font-size
在 25px
之间和仅 26.25px
不是 50px
.
您错过了 var(--root-size)
的乘法运算在第二部分。这样做你将得到 0px
之间的值。和 25px
但是有一个问题,因为你不能做这个乘法,因为你会有 px*px
使用 calc
无效.
为了克服这个问题,您的 font-size
需要被定义为无单位的,你的公式需要像下面这样调整:
* {
/* Setting root font size*/
--root-size: 20;
font-size: calc(var(--root-size, 20) * 1px);
/* Typography */
--main-font: 'Slabo 27px', serif;
/* Calculation, Ranges from 421px to 1199px */
--responsive: calc((var(--min-font) * var(--root-size) * 1px) + (var(--max-font) - var(--min-font)) * var(--root-size) * ((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) * 1px);
}
body {
background:red;
}
}
@media (max-width: 420px) {
h1,
p {
font-size: calc(var(--min-font) * var(--root-size) * 1px);
}
body {
background:blue;
}
}
/* 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>
关于css - 将 px 更改为 rem 后字体大小没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54229374/