【发布时间】：2015-02-17 20:31:47
【问题描述】：
我正在使用媒体查询在我的 Grails 应用程序中导入正确的样式表（mobile.css 或 main.css）。 如果我用我的电脑加载页面，它工作正常，当我用我的 Android 智能手机加载页面时，我得到一个没有添加样式的页面。
这是我的代码：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><g:layoutTitle default="Baoole"/></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="${createLinkTo(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
<link rel="apple-touch-icon" href="${resource(dir: 'images', file: 'apple-touch-icon.png')}">
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}">
<g:javascript library="application"/>
<link rel="stylesheet" media = "screen and (min-width: 480px)" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" title = "main" >
<link rel="stylesheet" media = "screen and (max-width: 480px)" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css" title = "mobile" >
<g:layoutHead/>
<r:layoutResources />
<langs:selector langs="it, es, en, en_US, pt_BR, pt_PT, de, da, ru, ja, cs_CZ"/>
</head>
<body class="index">
some code...
</body>
</html>
如果我颠倒标签的顺序，例如：
<link rel="stylesheet" media = "screen and (max-width: 480px)" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css" title = "mobile" >
<link rel="stylesheet" media = "screen and (min-width: 480px)" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" title = "main" >
我得到了与以前相反的行为。 （当我从智能手机加载时工作正常，当我从 PC 加载时没有样式）。
在我的 main.css 和 mobile.css 中，我有相同的 id 和类
main.css
.index {
background-image: url(../images/stadiodue.jpg);
background-repeat: no-repeat;
color: white;
margin: 0 auto;
max-width: 1350px;
overflow-x: hidden; /* prevents box-shadow causing a horizontal scrollbar in firefox when viewport < 960px wide */
-moz-box-shadow: 0 0 0.3em #255b17;
-webkit-box-shadow: 0 0 0.3em #255b17;
box-shadow: 0 0 0.3em #255b17;
font-family:"Trebuchet MS","Yanone Kaffeesatz","Agency FB";
font-size: 14.5pt;}
mobile.css
.index {
background: black;}
更新：
我认为问题不在于媒体查询的语法错误。如果我删除了 mobile.css 样式表的导入并且只有：
<link rel="stylesheet" media = "screen and (min-width: 480px)" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" title = "main" >
在我的代码中，应用程序以正确的行为响应：从 PC 加载页面我得到 main.css 样式，从智能手机加载页面我没有得到任何样式。
现在，添加第二个样式表导入（用于移动样式）：
<link rel="stylesheet" media = "screen and (max-width: 480px)" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css" title = "mobile" >
还有：
<link rel="stylesheet" media = "screen and (min-width: 480px)" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" title = "main" >
<link rel="stylesheet" media = "screen and (max-width: 480px)" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css" title = "mobile" >
没有任何变化。从移动设备加载的页面仍然没有添加任何样式。
我已经试过了：=(
1) 这种不同的媒体查询语法： media = "只有屏幕和 (max-device-width: 480px)"
2) 直接写在样式表中的媒体查询规则。
我想不通！也许可能是 Grails 的行为？
提前致谢！
【问题讨论】：
标签： css grails media-queries stylesheet stylesheet-link-tag