[英]Chrome Developer Tool is not showing responsiveness
我在 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
}
您在脑海中缺少 Viewport 标签,
将此添加到您的head
标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
请访问此文档以获取更多信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.