Question

我有两个样式表连接在头上像这样......

<link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="{% static '/mobile-style.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 8000px)" href="/style.css">

然后在表格中我有这个：

的style.css

body {color:blue;}

移动的style.css

body {color:red}

但是当我加载页面时，我只看到了style.css表，而不是mobile-style.css表，即使我在谷歌Chrome的网站管理员面板中加载它并将设备切换到小屏幕的东西。我尝试刷新删除缓存等没有运气。

我在这里做错了吗？

Answer 1

此处始终在style.css文件中应用css。因为在这里你已经放置了如下的媒体查询。

 @media(max-width: 800px){

  }
  @media(max-width: 8000px){

  }

此处style.css文件媒体为(max-width: 8000px)。 mobile-style.css总是如此，因为它是媒体(max-width: 800px)。所以总是应用style.css文件css样式。

更新后的答案......
所以，尝试这样的事情

<link rel="stylesheet" type="text/css" media="screen and (min-width: 799px)" href="mobile-style.css" >
<link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="style.css">

Answer 2

<link rel="stylesheet"
 type="text/css"
  media="screen (max-width: 8000px)"
  href="/style.css">

我删除了AND并简单地添加了media =“screen（max-width：800px）”，它对我有用。感谢

css媒体查询未显示

2 个答案: