Question

我有以下内容，我希望它切换使用的样式表，但是正在使用最后定义的样式表，媒体查询不起作用。除了我正在做的事情之外，我还需要做些什么吗？

<!-- iPhone -->
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 320px)"
                                              href="/frontend/stylesheets/iPhone.css"/>

<!-- samsung -->
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)"
                                              href="/frontend/stylesheets/samsung.css"/>

<!-- iPad -->
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 768px)"
                                              href="/frontend/stylesheets/iPad.css"/>

Answer 1

由于CSS Specificity并且因为您的iPad媒体查询实际上总是如此（因为移动设备上的屏幕宽度始终小于768px）。因此它将覆盖您在其他样式表中的规则/选择器。

您可以尝试以相反的方式重新排序样式表（例如，首先列出iPad），但我建议您指定更明确的媒体查询以实现您想要的效果。看看为查询添加min-device-width子句。

您可以在此处查看高级示例： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

如何使媒体查询切换样式表

1 个答案: