У меня есть два div, которые плавают рядом друг с другом. Я бы хотел, чтобы у него была ширина 100 пикселей, когда вы смотрите на нее в портретном режиме и даете 200 пикселей в пейзаже. На самом деле это происходит на мобильном устройстве.
Таким образом, div будет расширяться в ландшафтном режиме и немного уменьшиться в портрете.
Любые идеи?
Ну, это невозможно с CSS2, но можно было бы сделать то, что вы хотите, с помощью Javascript (зачитайте размер экрана и т.д.).
Я не уверен, какую технологию вы изучаете, но CSS3 предоставляет именно то, что вы хотите с CSS3 Media Queries.
С CSS3 у вас есть такие забавные вещи (или вы даже можете указать ширину, например 200px):
/* Portrait */
@media screen and (orientation:portrait) {
/* Portrait styles here */
}
/* Landscape */
@media screen and (orientation:landscape) {
/* Landscape styles here */
}
Просмотрите эту страницу примера для получения более подробного объяснения или этот.
EDIT Только потому, что я нашел эту страницу сегодня: Hardbroiled CSS3 Media Queries - очень хорошая запись.
Вы можете сделать это, используя функцию css media "ориентация". Таким образом, вы можете указать стили в зависимости от ориентации экрана, не связанных с размером экрана. Вы можете найти официальное определение w3.org об этой мультимедийной функции здесь. В сочетании со спецификациями developer.mozilla.org это объяснит, как это работает.
Цитата из w3.org о "ориентации медиа-функции:
"Ориентировочный носитель" - это портрет, когда значение < высота больше или равно для значения ' ширина. В противном случае "ориентация" - это "пейзаж".
Примечание/цитата от developer.mozilla.org о "ориентации":
Примечание. Это значение (то есть портрет или пейзаж) соответствует не для фактической ориентации устройства. Открытие мягкой клавиатуры на большинстве устройств в портретной ориентации заставляет окно просмотра становиться шире, чем высокий, тем самым вызывая браузер использует пейзажные стили вместо портрета.
Чтобы повторить, на самом деле ориентация экрана не вызывает запросы на портретные или альбомные медиа. Однако это соотношение между высотой и шириной экрана! Из-за этого также имеет смысл использовать "функцию ориентации" с немобильными/тактильными устройствами, поэтому я добавил небольшую демонстрацию, чтобы показать поведение этих медиа-запросов.
JSFIDDLE DEMO (попробуйте изменить размер порта представления)
Вот репрезентативные медиа-запросы, затрагивающие портретную и альбомную ориентацию.
@media screen and (orientation:portrait) {
/* Portrait styles */
/*set width to 100px */
}
@media screen and (orientation:landscape) {
/* Landscape styles */
/* set width to 200px*/
}