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

如何仅为屏幕宽度低于320px的设备编写CSS，而不是为所有设备编写CSS

我想写CSS像

向问题解释的唯一示例

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

---

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

您可以使用javascript实现这一点

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

if（document.clientWidth<300）{
document.getElementById（“yourElement”）.style.color=“blue”）；
}否则如果（document.clientWidth>=300）{
document.getElementById（“yourElement”）.style.color=“red”）；
}

或者类似的

如果样式表低于某个像素宽度，您可能还可以找到一种方法来包含不同的样式表。不过，我不太确定如何用JS修改

，所以您必须等待另一个答案，或者用谷歌搜索一下

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

---

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

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

---

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

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


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

---

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

代码示例

@媒体屏幕和屏幕（方向：纵向）{

}

@媒体屏幕和屏幕（方向：横向）{

}

请参见以下规范：

---

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

/* Portrait styles */

/* Landscape styles */