我需要设计一个响应的网站,也响应时,浏览器窗口的大小。
我在头标签中添加了以下代码:
<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对其进行样式设置
我错过了什么?
最佳答案
max-device-width
指的是设备分辨率,而不是窗口宽度大小,即min-width
或max-width
请参见here以获得更好的理解。device-width
用于目标移动设备,而不是桌面小尺寸窗口。
因此,如果您希望将mobile.css
用于屏幕分辨率宽度小于481px
的移动设备,并且还包括调整为小于481px
的桌面浏览器窗口,请替换:
(max-device-width: 480px)
致:
(max-width: 480px)
在
mobile.css
媒体查询规则中。