Media query css mobile: css — Media Queries: How to target desktop, tablet, and mobile?

Leave a Comment / Css / By /

css — почему мобильный медиа-запрос не работает на мобильном телефоне

Я знаю, что это глупый вопрос, но у меня проблемы с медиа-запросом на маленьком экране. Я дал изображению класс, поэтому оно должно работать. Кроме того, когда я попытался добавить идентификатор, это не сработало, так что что-то не так с моим кодом или медиа-запросом? Любая помощь или совет будут очень признательны.

 Только экран @media и (максимальная ширина: 600 пикселей){
.mondaycont .monday{
  положение: родственник;
  ширина: 20см;
  поле сверху: 10px;
}
}
.mondaycont{
  ширина: 84%;
}
.mondaycont .monday{
  положение: родственник;
  ширина: 40см;
  поле сверху: 20px;
}
.mondaytext{
  семейство шрифтов: «Интер», без засечек;
  вес шрифта: 400;
  белый цвет;
  поле сверху: 50 пикселей;
  положение: родственник;
}
.mondaytextbold{
  семейство шрифтов: «Интер», без засечек;
  вес шрифта: полужирный;
  белый цвет;
  поле сверху: 10px;
  положение: родственник;
} 
 

<голова>
    <мета-кодировка="UTF-8">
    
 

     0">
    ОШИБКА 404
    
    

<тело>
    
    
На этой странице сегодня понедельник...

    
На главную
 

    
    <дел>
        404
  • css
  • медиа-запросы

2

За вашим медиа-запросом следует объявление, которое применяется ко всем разрешениям, перезаписывая определение ширины вашего медиа-запроса. Медиа-запросы не влияют на специфичность, поэтому применяется обычное «последнее правило».

Поменять местами эти два правила:

 .mondaycont . monday {
  положение: родственник;
  ширина: 40см;
  поле сверху: 20px;
}
Только экран @media и (максимальная ширина: 600 пикселей) {
  .mondaycont .понедельник {
    положение: родственник;
    ширина: 20см;
    поле сверху: 10px;
  }
}
.mondaycont {
  ширина: 84%;
}
.mondaytext {
  семейство шрифтов: «Интер», без засечек;
  вес шрифта: 400;
  белый цвет;
  поле сверху: 50 пикселей;
  положение: родственник;
}
.mondaytextbold {
  семейство шрифтов: «Интер», без засечек;
  вес шрифта: полужирный;
  белый цвет;
  поле сверху: 10px;
  положение: родственник;
} 
  <голова> <мета-кодировка="UTF-8">ОШИБКА 404