媒体屏幕不随浏览器分辨率变化

Question

我第一次使用媒体屏幕，但它们似乎没有按照预期的方式工作...

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

这里的所有CSS样式都会显示为预期的样子。

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

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

提前感谢您的帮助 :)

- user1775570

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

- Dipak

---

这个解决方案在321像素以外没有任何效果！ - user1775570

@user1775570 你尝试调整大小了吗？ - Dipak

@user1775570，你的媒体查询写错了...复制粘贴我上面发布的代码就可以了 :) - Dipak

@user1775570请只使用宽度为700像素，移除321像素。 - Dipak