我正在准备我的第一个响应式网页布局。
我准备了两个css，一个用于普通模式，另一个用于移动模式。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)"
href="css/mobile.css" />
</head>
桌面模式(CSS)
#face
{
background-image: url(../images/Face.png);
background-repeat: no-repeat;
height:155px;
}
移动模式(CSS)
#face
{
display:none;
}
但是当我将浏览器窗口缩小到移动模式时，仍然会显示#face。
请指出我做错了什么
提前致谢。
中号
最佳答案
max-device-width 测量屏幕的宽度，而不是浏览器的宽度。
将其更改为 max-width。
关于html - @import 媒体查询 css 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19660058/