Mobile-первых медиазапросы не перекрывая оригинальный CSS

Скажем, у меня есть это:Mobile-первых медиазапросы не перекрывая оригинальный CSS

.about_text { 
    font-weight: 300; 
    font-size: 1.125rem; 
}

И:

@media screen and (min-width: 64em) { 
    .about_text { 
     font-weight: 600; 
     font-size: 1.500rem; 
    } 
}

Если я не использую это важно не переопределять оригинальный CSS ... Почему это может быть? Я использую LESS на сайте Wordpress, но я делал это бесчисленное количество раз, и этого никогда не было раньше. Я забочусь о медиа-запросах после оригинального CSS.

источник

2016-11-16 nakkeru

Можете ли вы привести пример, где он фактически не работает? – brouxhaha

попробуйте использовать каскадный для запроса медиа следующим образом, если вы хотите, чтобы запрос СМИ использовать стили CSS -

@media screen and (min-width: 64em) { 
    div .about_text { 
     font-weight: 600; 
     font-size: 1.500rem; 
     } 
    }

источник

2016-11-16 22:18:25 ross

И вы используете минимальную ширину, поэтому она может действовать только тогда, когда экран равен 64em (1024px) или больше. И когда я проверил, он применяет стили вашего медиа-запроса для 1024px и более. – ross

Это ничего не изменит. Все, что вы делаете, создает дополнительную специфику. – brouxhaha

Также используйте пиксели для мультимедийных запросов, так как вы никогда не можете быть уверены в том, что они имеют значение пикселя. – ross

Вашего код самого по себе выглядит хорошо. Могут возникнуть другие конфликтующие проблемы, но если нет, значит, у вас, скорее всего, проблема с точкой запуска вашего медиа-запроса.

Используйте форму измерения, основанную на px, вместо em для ваших медиа-запросов. Em являются относительными, тогда как px являются абсолютными и дают более последовательные результаты.

@media screen and (min-width: 480px) { 
 
    .about_text { 
 
    font-weight: 600; 
 
    font-size: 1.500rem; 
 
    } 
 
}

источник

2016-11-16 22:23:07

Использование 'em' в порядке и на самом деле является лучшим способом использования медиа-запросов. Изменение его на 'px' не изменит, как оно работает. – brouxhaha

До тех пор, пока базовый шрифт не настроен на что-то неудобное, учитывая это, тогда да, работа Эм также будет. Если это не проблема, то есть, скорее всего, другая проблема при воспроизведении, предотвращающая получение медиа-запроса прецедентом. –

Попробуйте это,

.about_text { 
font-weight: 600; 
font-size: 1.500rem;} 

@media screen and (max-width: 64em) { 
.about_text { 
    font-weight: 300; 
    font-size: 1.125rem;  
}

}

Ваш медиа-запрос не прилагая для мобильных устройств, она применяется только для настольного компьютера или большего размера.

источник

2016-11-21 05:34:00 NPN

Mobile-первых медиазапросы не перекрывая оригинальный CSS

ответ

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