Question

我不确定它是否与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>

和这两个样式表：

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设备工具栏切换宽度时它不会改变。

我的媒体查询是否有任何错误？

Answer 1

我不太确定您的代码如何不应该像它应该的那样反应，但将它放在样式表中是一种好习惯。以下是我快速测试的内容。

<强> 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%;
    } }

为什么Chrome DevTool设备工具栏无法与不同的样式表正常工作？

1 个答案: