Question

基本上，我正在重置所有font-size以适用于所有屏幕尺寸。基本上我正在重置为10px。

问题是，我在这里使用的查询之一：

@media screen and (min-width: 321px) and (max-width: 480px) {
    body {
        font: normal 2.083333333333333vw/1 normal sans-serif;
    }
}

未向360屏幕尺寸提供正确的输出。因为上面的内容从321设置为480 - 但未设置为360屏幕。

这里有什么不对？

以下是我对所有查看端口10px的完全重置。

p {
    font-size: 1.2em; //in all media it will be 12px.
}



@media screen and (max-width: 320px) {
    body {
        font: normal 3.125vw/1 normal sans-serif;
    }
}

@media screen and (min-width: 321px) and (max-width: 480px) {
    body {
        font: normal 2.083333333333333vw/1 normal sans-serif;
    }
}


@media screen and (min-width: 481px) and (max-width: 640px) {
    body {
        font: normal 1.5625vw/1 normal sans-serif;
    }
}

@media screen and (min-width: 641px) and (max-width: 768px) {
    body {
        font: normal 1.305483028720627vw/1 normal sans-serif;
    }
}

@media screen and (min-width: 769px) and (max-width: 1920px) {
    body {
        font: normal 1vw/1 normal sans-serif;
    }
}

更新

我的期望是：无论视图端口大小如何，min-font size都应该是10px。示例（320px）以及超过此视图端口font-size应该是maxium {{ 1}}。怎么做到这个？

媒体查询字体设置无法在“360”屏幕宽度上工作

0 个答案: