Question

如何仅为屏幕宽度低于320像素的设备编写CSS，但不是全部？

我想写像

这样的CSS

仅向问题解释的示例

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

如何在这两种情况下控制风景模式？

Answer 1

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

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

Answer 2

它不如屏幕和（max-width：或min-width）那么有名，但CSS3媒体查询还允许您根据您的方向设备应用css。

代码示例

@media screen and（orientation：portrait）{

/* Portrait styles */

}

@media screen and（orientation：landscape）{

/* Landscape styles */

}

见规格： http://www.w3.org/TR/css3-mediaqueries/#orientation

Answer 3

您可以使用javascript执行此操作。

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

或类似的东西。

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

如何只为屏幕宽度低于300像素的设备编写CSS，但不是全部？

3 个答案: