Chrome 開發者工具沒有顯示響應

Question

我在 chrome 開發者工具上檢查我的網站的響應時遇到問題。 當我調整我的 chrome window 的大小時，它顯示出響應性

在下圖中，chrome window 寬度為 768px

但是當我在 chrome 中使用Toggle Device Toolbar時，它不會顯示如下圖所示的響應能力。 寬度為 768 像素。

我的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 文件如下

樣式.css

All the styles are here no media queries

選項卡.css

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

手機.css

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

Answer 1

您在腦海中缺少 Viewport 標簽，

將此添加到您的head標簽

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

請訪問此文檔以獲取更多信息

Chrome 開發者工具沒有顯示響應

問題描述

1 個解決方案

解決方案1
1 已采納 2020-08-15 08:01:52

Chrome 開發者工具沒有顯示響應

問題描述

1 個解決方案

解決方案1 1 已采納 2020-08-15 08:01:52

解決方案1
1 已采納 2020-08-15 08:01:52