html - 媒体屏幕不会随着浏览器的分辨率而改变

Question

我第一次使用媒体屏幕，他们似乎也没有按照他们应该的方式工作......

@media only screen and (max-width : 320px) {

这里的所有css样式都显示为它应该的样子。

@media only screen and (max-width : 321px) {

当宽度超过 321 像素时，我在这里放置的所有 CSS 样式都不适用于页面。这不应该发生....例如，如果我要更改任何文本颜色，则最终不会发生任何变化。

在此先感谢您的帮助:)

Answer 1

您在此媒体查询中编写的 CSS 将应用于宽度小于321px;

@media only screen and (max-width : 321px) {

如果您想在调整大小时应用相同的 CSS，321px那么您需要根据您的要求增加宽度 -

@media screen and (max-width: 700px){

您需要将媒体查询写入类或元素，如 -

@media screen and (max-width: 700px){

body{
  font-size:20px;
  color:red;
}

} 

在这里演示