По какой-то причине режим эмуляции устройства не читает мои медиа-запросы. Он работает на других сайтах, включая мои собственные, которые я создал с помощью начальной загрузки, но не работает с медиа-запросами, которые я использую с нуля (при нажатии на кнопку медиа-запросов кнопка становится синей, но медиа-запросы не отображаются). Тестовый файл ниже. Это ошибка в Chrome или мне нужно что-то изменить в моем файле?
<!DOCTYPE html>
<!--
Media Queries Example 1
Sam Scott, Fall 2014
-->
<html>
<head>
<title>MQ Example 1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: sans-serif; }
h1 { color: red; }
h2 { color:blue; }
p { color:green; }
@media (max-width: 768px) and (min-width: 481px) {
h1 { color: green; }
h2 { color:red; }
p { color:blue; }
}
@media (max-width:479px), print {
h1,h2,p { color:black; }
}
@media print {
body { font-family: serif; }
}
</style>
</head>
<body>
<h1>I'm a first level heading</h1>
<p>I'm a paragraph.</p>
<h2>I'm a second level heading</h2>
<p>I'm another paragraph.</p>
</body>
</html>
css
google-chrome
media-queries
developer-tools
Сэм Скотт
источник
источник
Ответы:
Я исправил эту проблему, добавив на свою страницу метатег:
<meta name="viewport" content="width=device-width">ОБНОВЛЕНИЕ (декабрь 2019 г.):
Похоже, вам также может потребоваться установить начальный масштаб и минимальный масштаб, например:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />источник
946pxстраницу до экрана любого размера, который он эмулирует. Вы можете убедиться, что это правда, проверив, что ширина тега body вашей проблемной страницы всегда946pxуказана в эмуляторе. Тег области просмотра сообщает браузеру, как он должен попытаться отобразить страницу.width=device-widthдействует так, как вы ожидаете, при этомwidth=100pxвсе масштабируется. Вы можете прочитать об этом подробнее здесь: w3schools.com/css/css_rwd_viewport.aspПринятый ответ не помог мне, мне также пришлось добавить
minimum-scale=1.<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />источник
Эмуляция устройства в Chrome по-прежнему остается незавершенной. Честно говоря, я думаю, что они слишком рано отправили его в Chrome. Попробуйте использовать Canary (бета-браузер Chrome) для проверки эмуляции, я обнаружил, что он работает лучше, чем в Chrome.
источник
Работает для меня.
Просто поместите метатег области просмотра в заголовок своей страницы. См. Пример:
<head> <!--include the following meta tag to make chrome dev tools recognize media queries: --> <meta name="viewport" content="width=device-width"> </head>источник
Включите этот метатег в свой код:
<head> <!--include the following meta tag to make chrome dev tools recognize media queries: --> <meta name="viewport" content="width=device-width"> </head>источник
У меня была та же проблема, пока я не заметил, что если у меня есть более одной реализации для одного и того же набора правил в зависимости от размера экрана:
Укажите минимальную и максимальную ширину для одного и того же медиа-запроса, чтобы он не перезаписывался последующим:
@media screen and (min-width:9px , max-width:9px) { css.selector { style rules gets applied : in this range of screen sizes ; } } css.selector{ the other style get applied : starting from 10px ; }Или установите для всех хотя бы одну точку останова:
@media screen and (min-width:9px) { some styles get applied : starting from this point ; } } @media screen and (min-width:99px) { some styles gets applied : starting from this point ; } }источник