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) {

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

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

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

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

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

} 

Demo Here