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

发布于 2024-11-03 09:30:39 字数 241 浏览 0 评论 0原文

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

我想编写CSS，例如

仅用示例来解释问题

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

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

原文

How to write CSS only for devices which are below than 320px in screen width, but not for all?

I want to write CSS like

Only example to explain to question

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

And how to control Landscape mode in both condition?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

逆光下的微笑 2024-11-10 09:30:39

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

尽管您可能需要根据需要调整此值，具体取决于您是否关心视口的 CSS px 宽度或设备屏幕的 CSS px 宽度或其他内容。从问题中还不清楚这一点。

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

Though you may need to adjust this as needed depending on whether you care about CSS px width of the viewport or CSS px width of the device screen or something else. That wasn't clear from the question.

回复收藏 0 原文

绿萝 2024-11-10 09:30:39

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

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

回复收藏 0 原文

潦草背影 2024-11-10 09:30:39

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

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


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

I find that this code isn't very reliable on feature phones and some blackberrys. In which case I use Device Atlas to get the width on the server side.

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


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

回复收藏 0 原文

思念满溢 2024-11-10 09:30:39

它不像 screen 和 (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

It's not as famous as screen and (max-width: or min-width) but CSS3 media queries also allow you to apply css depending on your orientation device.

A code example

@media screen and (orientation:portrait) {

/* Portrait styles */

}

@media screen and (orientation:landscape) {

/* Landscape styles */

}

See there specification :
http://www.w3.org/TR/css3-mediaqueries/#orientation

回复收藏 0 原文

旧夏天 2024-11-10 09:30:39

您可以使用 JavaScript 来完成此操作。

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

或者类似的东西。

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

You could do this using javascript.

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

Or something like that.

You could probably also find a way to include a different style sheet if it's under a certain pixel width. I'm not exactly sure how to modify a <head> with JS, though, so you'll have to wait for another answer or google around a bit.

回复收藏 0 原文

~没有更多了~