響應式樣式不適用於窗口大小調整

Question

我需要設計一個響應式網站，當瀏覽器窗口調整大小時也會作出響應。

我加入了頭標記以下代碼：

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

，我已經包括以下類型：

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px) and (max-device-width: 1500px)" href="style.css" /> 
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" /> 

然而，當我調整我的瀏覽器窗口小於寬度480像素，仍然該文件使用style.css風格，而它應該已被風格mobile.css

我在想什麼？

Answer 1

max-device-width是指您的設備分辨率，而不是窗口寬度的大小，即min-width或max-width請參閱here以便更好地理解。

device-width用於當您要定位移動設備但不是桌面小尺寸窗口。

所以，如果你希望你的mobile.css用於與屏幕分辨率的移動設備寬度小於481px還包括調整爲小於481px然後桌面瀏覽器窗口替換：

(max-device-width: 480px) 

爲：

(max-width: 480px) 

您的mobile.css媒體查詢規則。