媒体屏幕不会更改CSS的字体大小

Question

所以我有一些问题，如果浏览器是全屏的，所有内容都显示正确，当我更改浏览器的大小时，#table112不会更改它的字体大小，但它应该根据逻辑进行更改。那么我在哪里搞错了

#table112 {
display: flex;
font-size: 14px;
align-items: center;
justify-content: flex-start;
padding: 1rem;
}

@media screen and (min-width: 600px) {
#table112 {
font-size: 12px;
}
}
@media screen and (max-width: 900px) {
#table112 {
font-size: 12px;
}
}

Answer 1

使用媒体查询时，在中间值中同时使用min-width和max-width可以根据字段宽度应用样式。只有min-width用于最大屏幕宽度，而max-widht用于最小屏幕宽度。

#table112 {
display: flex;
font-size: 75px;
align-items: center;
justify-content: flex-start;
padding: 1rem;
}
@media screen and (min-width: 1024px){
#table112 {
font-size: 75px;
}
}
@media screen and (min-width: 900px) and (max-width: 1023px) {
#table112 {
font-size: 50px;
}
}
@media screen and (min-width: 600px) and (max-width: 899px) {
#table112 {
font-size: 25px;
}
}
@media screen and (max-width: 599px) {
#table112 {
font-size: 10px;
}
}

<p id="table112">TEST</p>

Answer 2

您必须替换min-width和max-width。

@media screen and (max-width: 600px) {
#table112 {
font-size: 12px;
}
}
@media screen and (min-width: 900px) {
#table112 {
font-size: 12px;
}
}

要了解这些属性在@media中是如何工作的，请阅读本文。