Question

我正在准备我的第一个响应式网页布局。

我准备了两个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，这就是显示。

请建议我做错了什么

提前致谢。

中号

Answer 1

max-device-width测量屏幕的宽度，而不是浏览器的宽度将其更改为max-width。

Answer 2

@media (max-width: 600px) {
    #face
    {
        display:none;
    }
}

试试这个

或者你可以使用这个

<link rel="stylesheet" media="(max-width: 800px)" href="mobile.css" />

@import媒体查询css问题

2 个答案: