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

Question

我想为不同的屏幕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。

Answer 1

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

max-device-width: 700px

不是真的

min-device-width: 701px

是正确的，因此您实际预期会遇到这种行为。

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

Answer 2

您只需更改订单并删除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

的更多信息

Answer 3

您必须按顺序写入较大尺寸到较小尺寸的媒体查询，因此在您的情况下，文件应按从高701px到较低700px的顺序包含。

<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)">