CSS Media Queries

Question

Я пытаюсь адаптировать свое планшетное веб-приложение для использования на мобильных телефонах.Функциональность Media Query кажется идеальной, и мое первоначальное тестирование подтверждает это.Вопрос, который у меня возникает: с телефонами и планшетами, которые меняют свою ориентацию с портретной на альбомную (при повороте устройства), на что тогда ссылается max-width?

Другими словами, у более крупных телефонов Android есть разрешениеВ соответствии с 480x800, iPhone4 имеет разрешение 640x960, а оригинальный Blackberry Torch имеет разрешение 360x480.Это все разрешения (Ш х В), когда устройства удерживаются в портретном режиме, поэтому их ширина составляет 400, 640 и 360 соответственно.Однако при повороте устройства в горизонтальное положение высота становится шириной для отображения.Таким образом, эффективные ширины в альбомной ориентации становятся 800, 960 и 480 соответственно, а ширины 800 и 960 перекрываются с шириной планшета, что портит отображение.

Итак, ширина всегда ширина?То есть, когда устройство сообщает свои размеры, всегда ли значение ширины остается неизменным для целей CSS, или значение ширины изменяется, когда устройство поворачивается в горизонтальную плоскость?

Заранее спасибо всем.

Answer 1

Значение ширины изменится, когда устройство будет перевернуто, потому что ширина просматриваемой страницы также изменяется.

Если вы хотите узнать, используется ли устройство в альбомной или книжной ориентации, вы можете использовать вместо этого свойство ориентации:

@media screen and (orientation: portrait) {
}

Это проверит, больше ли ширина окна браузера, чем высота (альбомная ориентация будет работать наоборот). Для достижения наилучших результатов вам, вероятно, понадобится использовать комбинацию многих свойств MQ с помощью оператора «и» для цепочки тестов. i.e.:

@media screen and (orientation: landscape) and (max-width: 960px) {
}

полный список свойств MQ доступен здесь .

Answer 2

Значение css изменяется в зависимости от его ландшафта или нет на мобильном телефоне, так как ширина и высота дисплея изменяется на мобильном телефоне при повороте телефона или планшета.поэтому вы должны быть конкретны при определении стиля CSS, чтобы ориентироваться на то, что вы хотите.

@ media (минимальная ширина: 700px) и (ориентация: альбомная) {

}

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

Answer 3

Медиа-запросы используются для определения стиля для разных размеров экрана. Я собираюсь рассказать вам об основах медиа-запросов. Синтаксис CSS Media Query:

@media not|only mediatype and (media feature) {
CSS-Code;
}

Для получения подробной информации об общем синтаксисе медиа-запросов, пожалуйста, посетите Этот сайт