CSS @import вызывает запрос медиа-запросов не работает

Так что я столкнулся с чем-то интересным. Мне нравится, чтобы мой css был красивым и аккуратным, и мне нужна только одна ссылка таблицы стилей в голове < >, поэтому для этого я создал главный файл css, который использует @import для ввода остальных таблиц стилей. Проблема, с которой я сталкиваюсь, заключается в том, что, когда вы делаете это по какой-то причине, css-медиа-запросы, которые используют селектор классов, не работают, но если вы используете ids, то это делает ... Что дает?CSS @import вызывает запрос медиа-запросов не работает

HTML-

<head> 
     <meta charset=utf-8> 
     <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> 
     <title>Some page</title> 
     <link href=master.css rel=stylesheet> 
    </head>

master.css

@import url(css/some.css); 
@import url(css/somemore.css); 
@import url(css/media.css)

media.css

/* This works */ 

@media all and (max-width: 380px) { 
    #id1, #id2 { 
     width: 88%; 
    } 
} 


/* This doesn't */ 

@media all and (max-width: 380px) { 
    .class1 { 
     width: 88%; 
    } 
}

источник

2015-05-21 Darkrum

Если вы собираетесь отделить ваши файлы css, я бы использовал что-то вроде SASS или LESS. Он легко позаботится об этом для вас. – Bioto

, вероятно, ширина переопределяется другим стилем css, когда вы используете селектор классов. Попробуйте указать более точный путь к элементу ('.class1parent .class1') –

Вы показываете нам карандаши, но не раскраски. Необходимо увидеть HTML. – Rob

я понял почему он делал это, мои медиа-запросы были до моего класса в таблице стилей ...

/* This doesn't work */ 

@media all and (max-width: 380px) { 
    .class1 { 
     width: 88%; 
    } 
} 

.class1 { 
    width: 300px; 
}

/* This works */ 

.class1 { 
    width: 300px; 
} 

@media all and (max-width: 380px) { 
    .class1 { 
     width: 88%; 
    } 
}

источник

2015-05-21 23:59:52 Darkrum

Ваше последнее правило css переопределяет предыдущий. Тег @media действует как if. Так что в вашем /*doesnt work*/ один, что он в основном высказывание

.class1 {/*This is your doesnt work code*/ 
    width: 88%; 
} 

.class1 { 
    width: 300px; 
}

Изменить порядок ваших УГК и медиа-тегов или использовать !important, чтобы решить эту проблему.

источник

2015-05-22 00:17:55

Уже понял (см. Мой ответ), что смешно, потому что я должен был запомнить это, потому что я столкнулся с ним раньше. – Darkrum

О, я не проверял другие ответы. Виноват. lol –

Это нормально, мне действительно нравится ваш ответ, потому что вы действительно объясняете, почему это происходит. – Darkrum

CSS @import вызывает запрос медиа-запросов не работает

ответ

Смежные вопросы