如何仅为屏幕宽度低于 300 像素的设备编写 CSS，而不是为所有设备编写 CSS？答案

【问题标题】：How to write CSS only for devices which are below than 300px in screen width, but not for all?如何仅为屏幕宽度低于 300 像素的设备编写 CSS，而不是为所有设备编写 CSS？
【发布时间】：2011-04-25 16:45:01
【问题描述】：

如何只为屏幕宽度小于 320 像素的设备编写 CSS，而不是为所有设备编写 CSS？

我想像这样写 CSS

仅举例说明问题

devices with min-width of 300 px  { color:red}
devices with max-width of 299 px  { color:blue}

以及如何在这两种情况下控制横向模式？

【问题讨论】：

标签： css mobile-safari mobile-website

【解决方案1】：

myselector { color: blue; }
@media screen and (min-width: 300px) {
  myselector {
    color: red;  
  }
}

尽管您可能需要根据需要进行调整，具体取决于您是否关心视口的 CSS px 宽度或设备屏幕的 CSS px 宽度或其他内容。问题并不清楚。

【讨论】：

【解决方案2】：

有一篇精彩的文章可以比我在这里更好地解释它：

http://www.alistapart.com/articles/responsive-web-design/

【讨论】：

【解决方案3】：

我发现此代码在功能手机和某些黑莓手机上不太可靠。在这种情况下，我使用Device Atlas 来获取服务器端的宽度。

@media only screen and (max-width: 299px) {
  color:blue;
}


@media only screen and (min-device-width: 300px) {
  color:red;
}

【讨论】：

但我认为在较旧的浏览器媒体屏幕中将无法使用它们支持手持设备
是的，你可以在服务器端代码中获取屏幕大小，然后使用内联CSS设置宽度。此外，为所有设备使用一个标记非常痛苦，尤其是对于较旧的设备，您可能希望限制您支持的设备或进行一些用户代理嗅探并为这些设备提供不同的标记。

【解决方案4】：

它不像屏幕和（最大宽度：或最小宽度）那么有名，但 CSS3 媒体查询还允许您根据您的方向设备应用 css。

代码示例

@media screen and (orientation:portrait) {

/* Portrait styles */

}

@media screen and (orientation:landscape) {

/* Landscape styles */

}

查看规范： http://www.w3.org/TR/css3-mediaqueries/#orientation

【讨论】：

【解决方案5】：

您可以使用 javascript 来做到这一点。

if (document.clientWidth < 300) {
 document.getElementById("yourElement").style.color="blue");
} else if (document.clientWidth >= 300) {
 document.getElementById("yourElement").style.color="red");
}

或者类似的东西。

如果它在某个像素宽度以下，您可能还可以找到一种方法来包含不同的样式表。不过，我不确定如何用 JS 修改 <head>，所以你必须等待另一个答案或谷歌一下。

【讨论】：