Совместимый с устройством CSS — @media

#html #css #web #media #device-compatibility

#HTML #css #паутина #Медиафайлы #совместимость с устройствами

Вопрос:

В настоящее время я использую @media only screen и (максимальная ширина: 1000 пикселей) {} для совместимого с устройством css для моего веб-сайта, который работал на телефонах после загрузки, но не на маленьком мониторе ПК (ширина около 1200 пикселей). Предположительно, он работал на моем домашнем компьютере, когда я отрегулировал ширину браузера. Правильна ли строка синтаксиса?

Комментарии:

1. Добро пожаловать в SO. Вы должны поделиться своим кодом с css, чтобы найти решение

2. Общие медиа-запросы для устройств можно найти здесь — см.

Ответ №1:

Эта строка отсутствовала в заголовке

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 

Наряду с этим был кеш браузера, который добавлял страданий моей CSS-жизни.

Ответ №2:

Ваш медиа-запрос может перекрываться. Попробуйте это ниже

 @media screen (min-width: 800px) {
         //your style here !
    }

@media screen (min-width: 1200px) {
         //your style here !
    }
 

Комментарии:

1. Я пытался, но некоторые элементы мобильных версий меньшей ширины не смогли переопределить основной дизайн.