我使用三个具有不同媒体查询的单独样式表来在各种屏幕尺寸下适本地加载我的网站，但是我似乎根本无法加载移动样式表(最大宽度:480 像素)。相反，它会加载 (max-width: 1000px) 样式表。
这是它们在 html 中的呈现方式
<link rel="stylesheet" type="text/css" href="/CSS/page_style.css" media="screen">
<link rel='stylesheet' type="text/css" href='/CSS/page_narrow.css' media='screen and (max-width: 1000px) and (min-width: 481px)'>
<link rel='stylesheet' type="text/css" href='/CSS/page_thin.css' media='screen and (max-width: 480px)'>
编辑 - 我刚刚尝试使用视口(viewport)元标记并起作用。谢谢你们，我已经坚持了几天了!
最佳答案
写作是因为没有人花时间发布答案。
问题是除非viewport meta tag添加后，移动浏览器通常模拟 980px 宽的显示器，因此它们将加载为 481-1000px 设计的样式表。
设置 width=device-width将使他们使用真实设备的屏幕宽度。
完整代码 - 添加到 <head>下一行:
<meta name="viewport" content="width=device-width, initial-scale=1">
关于html - 移动 CSS 文件未加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37729446/