0

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

我准备了两个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 仍然显示。

请告诉我我做错了什么

提前致谢。

米

4

2 回答 2

3

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

于 2013-10-29T13:52:31.967 回答
0 
@media (max-width: 600px) {
    #face
    {
        display:none;
    }
}

试试这个

或者你可以使用这个

<link rel="stylesheet" media="(max-width: 800px)" href="mobile.css" />
于 2013-10-29T13:58:01.023 回答