移动CSS文件不加载

我使用三个不同的媒体查询独立的样式表来适当加载我的网站在各种屏幕尺寸，但我似乎无法得到移动样式表（最大宽度：480px）到负载。相反，它会加载（max-width：1000px）样式表。移动CSS文件不加载

这里是他们是如何在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)'>

编辑 - 我刚刚与视meta标签和作品尝试。谢谢你，我现在已经坚持了几天！

来源

2016-06-09 Ed Lewis

你如何测试你的工作？你使用的是Chrome的设备模拟器吗？ – Brayniverse

您正在使用绝对路径，您确定“/CSS/page_style.css”加载是否正确？ – Marcandria

您是否将[视口元标记]（http://stackoverflow.com/questions/14775195/is-the-viewport-meta-tag-really-necessary）添加到文档中？ – Turnip

写作，因为没有人花时间发表答案。

问题是，除非添加了viewport meta tag，移动浏览器通常模拟980px宽的显示器，因此它们将加载为481-1000px设计的样式表。

设置width=device-width将使它们使用真实设备的屏幕宽度。

完整代码 - 添加到<head>以下行：

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

来源

2016-06-09 15:34:56 pzmarzly

移动CSS文件不加载

回答

相关问题