不同屏幕宽度的不同样式表答案

【问题标题】：different stylesheets for different screen widths不同屏幕宽度的不同样式表
【发布时间】：2016-09-08 19:03:32
【问题描述】：

我想为不同的屏幕widths（700px 之前和之后）使用不同的样式表。

<link rel="stylesheet" href='media700.css' media="screen and (max-device-width:700px)">
<link rel="stylesheet" href='media1366.css' media="screen and (min-device-width:701px)">

不起作用。 media1366 总是覆盖media700。

【问题讨论】：

应该可以正常工作。请添加mcve

标签： css media-queries

【解决方案1】：

您设备的width 大于700px，因此

max-device-width: 700px

不是真的并且

min-device-width: 701px

是真的，因此您所经历的行为实际上是预期的。

这两个规则不能互相覆盖，因为它们是互斥的。

【讨论】：

但是如果我调整浏览器窗口的大小，例如在 500px 上，应该使用and reload the page', media700，不是吗？
不，那是窗口宽度。您的媒体查询依赖于设备宽度。如果您打算按窗口宽度查询，请分别使用 min-width 和 max-width 而不是 min-device-width 和 max-device-width。

【解决方案2】：

您必须按从大到小的顺序编写媒体查询，因此在您的情况下，文件应该按从大 701 像素到小 700 像素的顺序包含。

<link rel="stylesheet" href='media1366.css' media="screen and (min-device-width:701px)">
<link rel="stylesheet" href='media700.css' media="screen and (max-device-width:700px)">

【讨论】：

【解决方案3】：

你只需要更改顺序并删除device这个词

<link rel="stylesheet" href='media1366.css' media="screen and (min-width:701px)">
<link rel="stylesheet" href='media700.css' media="screen and (max-width:700px)">

查看更多信息Stack Overflow Answer

【讨论】：