2016-07-21 7 views
0

Я хочу, чтобы стиль моего 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>

Но, к сожалению, это не сработало. Проблема заключалась в том, что когда я загрузил сайт на ландшафтном устройстве, код не изменился.

Примечание: Моя проблема не, что медиа-запросы полностью не функционируют. Тем не менее, я не могу использовать более двух медиа-запросов.

спасибо.

+0

Я вижу целый ряд вопросов, на этом сайте о «СМИ запросы не реагирует на ориентацию». Вы посмотрели на них? Например: http://stackoverflow.com/q/20199764/215552, http://stackoverflow.com/q/17637833/215552, http://stackoverflow.com/q/20026904/215552. –

+0

Спасибо большое! Это сработало! – Ned29

ответ

0

Для начала, попробуйте использовать это вместо того, что у вас есть:

@media screen and (max-width: 1024px) {... 
+0

Хорошо. Я редактировал свой код. Что мне теперь делать? Спасибо – Ned29

+0

хорошо, пишите медиа-запросы для разных ширины экрана (и будьте осторожны, чтобы написать их в значимом порядке: не было смысла начинать с max-width: 768px, 'а затем добавить раздел для« max-width » : 1024px', так как второй будет переопределять первый (то есть ширина экрана шириной 600 пикселей будет ниже 768 и ниже 1024px в ширину). Поэтому в этом примере вам придется делать это в обратном порядке. (Примечание: я не знайте, какова ваша точная проблема, поэтому я не могу быть более конкретным - вы должны опубликовать свой код и описать точную проблему, если хотите получить больше, чем общий ответ ...) – Johannes

+0

Большое спасибо. Спасибо, связка! – Ned29