@import media queries css issue

我正在準備我的第一個響應式網頁佈局。@import media queries css issue

我準備了兩個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這顯示。

請告訴我我做錯了什麼

在此先感謝。

中號

來源

2013-10-29 user2690456

哪裏是你的'@ import'聲明？ – BoltClock

嗨，我不能讓你請解釋我更多 – user2690456

max-device-width措施的屏幕的寬度，而不是瀏覽器的寬度。
將其更改爲max-width。

來源

2013-10-29 13:52:31 SLaks

我做到了，但仍然沒有得到實際的輸出 – user2690456

嗨對不起，我得到了它謝謝 – user2690456

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

試試這個

或者你可以用這個

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

來源

2013-10-29 13:58:01

@import media queries css issue

回答

相關問題