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

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