Chrome 开发者工具没有显示响应答案

【问题标题】：Chrome Developer Tool is not showing responsivenessChrome 开发者工具没有显示响应
【发布时间】：2020-08-15 16:01:52
【问题描述】：

我在 chrome 开发者工具上检查我的网站的响应时遇到问题。当我调整我的 chrome 窗口的大小时，它会显示响应性

在下图中chrome窗口宽度为768px

但是当我在 chrome 中使用 Toggle Device Toolbar 时，它不会显示如下图所示的响应能力。宽度为 768px。

我的index.html文件如下

<!DOCTYPE html>
<html>
<head>
    <title>Personal Site</title>
    <link rel="stylesheet" type="text/css" href="./styles/style.css">
    <link rel="stylesheet" type="text/css" href="./styles/tab.css">
    <link rel="stylesheet" type="text/css" href="./styles/mobile.css">
</head>
<body>
All the Code lies here
</body>
</html>

我的 CSS 文件如下

style.css

All the styles are here no media queries

tab.css

@media only screen and (max-width: 768px) and (min-width: 501px)
{
All the styles are here
}

mobile.css

@media only screen and (max-width: 500px)
{
All the styles are here
}

【问题讨论】：

将此标签添加到头部 -

标签： html css responsive-design media-queries

【解决方案1】：

您的脑海中缺少 Viewport 标签，

将此添加到您的 head 标签中

<meta name="viewport" content="width=device-width, initial-scale=1.0">

请访问Document了解更多信息

【讨论】：