Question

我之前从未使用过媒体查询，而且我真的不确定我的代码是否能在所有设备上正常运行。因此，我想请您说出您的经验和知识，并告诉我某些特殊/任何设备上可能出现的问题。

经过一番阅读后，我决定按照我的想法去做，并使用简单的规则：

@media (max-width:504px){
/* My style for mobile/ipad etc */
}
@media (min-width:505px){
/* My style for laptops/desktop etc */
}

Answer 1

IMO最好为两种显示尺寸之一编写CSS，然后使用媒体查询覆盖样式。佛前移动优先方法：

#some-element { font-size: 2em; }
.container { color: red; }
.another-class { width: 100px; }

@media (min-width: 505px) {
  #some-element { font-size: 1.5em; }
  .container { color: blue; }
}

这种方式有两个好处：

您不必为两个媒体查询编写相同的代码，只需覆盖（您不必为媒体查询复制.another-class）。
没有媒体查询支持的古代浏览器将使用不在媒体查询中的样式呈现网站。

Answer 2

Artur的回答是正确的，像IE7这样的旧版浏览器不支持媒体查询，但媒体查询设计主要用于现代浏览器，因此除非你想要，否则创建一个后备CSS并不是必需的因为一些CSS属性（隐藏某些元素，例如display：none）不会起作用，所以你的网页设计会失去目的。每个网页设计师都有自己的CSS编写方式，但我更喜欢这种方法：

body, html{

width:100%;
margin:0;
/* Base CSS that will affect all resolutions */ 
}

#elements-up-to-320px{
/* CSS for elements up to first media query */
}

@media (min-width:320px){
/* CSS for elements from 320px and up until next media query */
}

@media (min-width:480px){
/* CSS for elements from 480px and up until next media query */
}

这种方式更容易理解，最后的CSS媒体查询将适用于更高的屏幕尺寸。

Answer 3

如果你想创建一个CSS-Gridsystem（例如）@media是好的，它需要一个带有min-width或更多宽度的参数。因此，您可以为不同的屏幕大小设置不同的CSS-Propeties。

链接：

SELFHTML

w3schools

希望能帮到你:)。

使用媒体查询的最佳方式

3 个答案: