如何解决Chrome开发者工具未显示响应性
在Chrome开发者工具上检查我的网站的响应能力时出现问题。当我调整Chrome窗口的大小时,它显示了响应度
在下面的图片中,chrome窗口的宽度为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文件如下
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
}
解决方法
您的头部缺少视口标签,
将此添加到您的head
标签
<meta name="viewport" content="width=device-width,initial-scale=1.0">
请访问此Document以获取更多信息
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。