CSS媒体查询是否允许您将移动屏幕的元素大小设置为已为网络屏幕的元素设置的大小百分比

Question

我有一个这样的代码：

.text--heading {
width: 382px;
height: 55px;
font-family: Tomica;
font-style: normal;
font-weight: bold;
font-size: 40px;
line-height: 55px;
color: #181E4B;
}

我需要使它具有响应性，并减少大多数元素的长度、字体大小等。

媒体查询是否有任何功能，我可以做以下事情：

@media only screen and (max-width: 700px) {
.text--heading {
font-size: size /* where size is 30% of size already defined previously*/
}
}

Answer 1

您可以做的是缩放元素，如果我正确理解您的意图，至少对于您上面发布的CSS规则，它应该会有非常相似的结果。因此，媒体查询如下(其中所有内容都是原始大小的50%(：

@media only screen and (max-width: 700px) {
.text--heading {
transform: scale(0.5);
}
}

另请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale((

Answer 2

CSS var和calc的组合可以工作，但它是CSS3，可能在旧的浏览器中不工作。

:root {
--a: 40px;
}
.text--heading {
width: 382px;
height: 55px;
font-family: Tomica;
font-style: normal;
font-weight: bold;
font-size: var(--a);
line-height: 55px;
color: #181E4B;
}
@media only screen and (max-width: 700px) {
.text--heading {
font-size: calc(var(--a) * .3);
}
}