为什么Chrome DevTool设备工具栏不能在不同的样式表上正常工作？

我不确定这是否与devtool设备工具栏有关，但给定以下html：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <link rel='stylesheet' type='text/css' media='screen and (max-width: 700px)' href='css/style_smartphone.css' />
      <link rel='stylesheet' type='text/css' media='screen and (min-width: 701px)' href='css/style_tablet.css' />
      <title>test</title>
    </head>
    <body>
    </body>
    </html>

和这 2 个样式表：

style_tablet.css

html, body{
  height: 100%;
  width: 100%;
}
body {
  background: black;
}

style_smartphone.css

html, body{
  height: 100%;
  width: 100%;
}
body {
  background: blue;
}

当我减小窗口大小时，我可以看到背景发生了变化，但是当我从 Devtool 设备工具栏切换宽度时，背景不会改变。

我的媒体查询有没有出错？

我不太确定您的代码如何反应不佳，但将其放在样式表中是一种很好的做法。以下是我快速测试的内容。

.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>test</title>
</head>
<body></body>
</html>

风格

@media screen and (max-width: 1000px) and (min-width:300px) {
    body {
        background: blue;
        height: 100%;
        width: 100%;
    } }
@media screen and (min-width: 1001px) {
    body {
        background: black;
        height: 100%;
        width: 100%;
    } }

相关内容

最新更新

热门标签：