css - 使用Media Query和Grails获取条件CSS时遇到问题

我正在使用媒体查询在Grails应用程序中导入正确的样式表(mobile.css或main.css)。
如果我用PC加载页面，则工作正常，当我用Android smarthphone加载页面时，会得到一个未添加样式的页面。

这是我的代码:

<!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 =“仅屏幕和(最大设备宽度:480px)”

2)媒体查询规则直接写在样式表中。

我想不通!也许是Grails的行为？

提前致谢!

最佳答案

代替

<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 = "only screen and (max-device-width: 480px)" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css" title = "mobile" >

https://stackoverflow.com/questions/28570591/

android - 无法将android中的POST请求发送到Grails后端

svn - 我可以在没有 svnserve 的情况下通过 SSH 进行 SVN 吗？

java - 在 Java 或 Grails 应用程序中动态创建实体、Spring 存储库和 fac

haskell - 关于Cygwin中Haskell程序的stdout缓冲区的问题

shell - 自动输入shell密码的方法？

bash - SSH Bash脚本，易于连接

ssh - 通过不安全的连接发送加密 key 的方法？

ssh - 如何为集群创建自动 "ssh"

security - SSH key 交换