Проблемы с получением условного CSS с помощью Media Query и Grails

Я использую медиа-запросы для импорта правильной таблицы стилей (mobile.css или main.css) в моем приложении Grails. Если я загружаю страницу с моего ПК, она работает нормально, когда я загружаю страницу с помощью своего смартфона 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" >

я получаю противоположное поведение, чем раньше. (работает нормально, когда я загружаю со смартфона, нет стиля, когда я загружаю с ПК).

В моем main.css и mobile.css у меня одинаковые идентификаторы и классы

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" >

в моем коде приложение отвечает правильным поведением: при загрузке страницы с компьютера я получаю стиль 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) Правила медиазапросов, написанные непосредственно в таблице стилей.

Я не могу понять это! Может быть, поведение Грааля?

Заранее спасибо!

Источник

2 ответа

Это может зависеть от синтаксиса, используемого для импорта CSS, если вы посмотрите на этот пример, медиа-правила, загруженные с таблицей стилей, должны выглядеть <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

Или попробуйте загрузить правила медиа-запросов непосредственно в таблицу стилей для мобильных стилей:

 @media screen and (max-width: 480px) {
    .index {
        /*all your prop*/
    }
}

и для основного:

  @media screen and (min-width: 480px) {
    .index {
        /*all your prop*/
    }
}
Источник

Вместо

<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" >
Источник
Другие вопросы по тегам