Я хочу, чтобы стиль моего HTML по-разному соответствовал различным медиа-запросам. Например, я хочу, чтобы мой HTML отображался таким образом, когда он просматривается в браузере с шириной 1024 пикселя или менее, и по-другому, если он просматривается в браузере с альбомной ориентацией (например, когда телефон перевернут). Вот что я пробовал делать;Как связать сайт с несколькими медиа-запросами?
@media (max-width: 1024px) {
\t h1{
margin-top: 10px;
}
}
@media (orientation: landscape) {
\t h1{
margin-top: 20px;
}
}
<html>
<body>
<h1>Hello world</h1>
</body>
</html>
Но, к сожалению, это не сработало. Проблема заключалась в том, что когда я загрузил сайт на ландшафтном устройстве, код не изменился.
Примечание: Моя проблема не, что медиа-запросы полностью не функционируют. Тем не менее, я не могу использовать более двух медиа-запросов.
спасибо.
Я вижу целый ряд вопросов, на этом сайте о «СМИ запросы не реагирует на ориентацию». Вы посмотрели на них? Например: http://stackoverflow.com/q/20199764/215552, http://stackoverflow.com/q/17637833/215552, http://stackoverflow.com/q/20026904/215552. –
Спасибо большое! Это сработало! – Ned29