Могут ли медиа-запросы измениться с ex. альбомный режим в портретный без обновления браузера?

Привет, у меня есть вопрос, надеюсь, кто-то может мне помочь. пытался найти некоторые темы об этом, но ничего, что мне помогает.

Я пытаюсь сделать медиа-запросы и хочу, чтобы они изменились ex. из альбомного режима в портретный на iPhone, iPad и т. д. без обновления браузера? -И он все еще должен работать в браузере ПК.

попробовал

@media только экран и (минимальная ширина: 240 пикселей) и (максимальная ширина: 520 пикселей), только экран и (минимальная ширина устройства: 240 пикселей) и (максимальная ширина устройства: 520 пикселей) { ... }

Возможно ли, что я пробовал много вещей, и я стою на месте прямо сейчас, надеюсь, что кто-то может мне помочь с этим.


responsive-design media-queries landscape-portrait
person Martin Nielsen    schedule 24.09.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

медиа-запросы реагируют на изменение ориентации, они применяют стили на ее основе и не обновляют вашу страницу.

Вот список медиа-запросов

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
person Sudheer    schedule 25.09.2014
comment
Спасибо, но когда я использую минимальную ширину устройства, браузер игнорирует медиа-запросы. - person Martin Nielsen; 27.09.2014
comment
Используете мобильный телефон или симулятор для тестирования? - person Sudheer; 27.09.2014
comment
Используя мобильный телефон, но я использую минимальную ширину в своих запросах, и это работает, но мне все еще нужны разные правила для устройств и браузеров, чтобы браузер не использовал правила для устройств. так что я могу решить эту проблему, если я использую минимальную ширину устройства и максимальную для устройств, это будут только те устройства, которые используют эти правила. Итак, если я использую минимальную ширину и максимальную ширину, это будет читать только браузер? ты чувствуешь, куда я иду? :-) - кстати все, что с портретным и альбомным видом я решил, спасибо :-) - person Martin Nielsen; 28.09.2014
comment
я не понял ваш вопрос .. вы спрашиваете, если вы используете min-device-width браузер игнорирует этот запрос? (если это ваш q -NO).min-width или min-device-width оба читаются браузером (независимо от устройства). min-width немного отличается, обратитесь к этому ответу-stackoverflow.com/questions/26051087/ - person Sudheer; 29.09.2014
comment
это был мой вопрос, а в чем тогда между ними разница? - person Martin Nielsen; 30.09.2014
comment
min-device-width - это разрешение экрана` min-width``` - эквивалентное разрешение css. Мой телефон и мой ноутбук имеют экраны 1080p. Оба имеют одинаковую ширину устройства.. Но css добавляет слой поверх моего экрана моба, чтобы работайте со стилями, такими как размеры шрифта (30 пикселей непросто, если разрешение css также равно 1080 пикселей на мобильных телефонах), это разрешение слоя связано со свойством min-width, которое составляет около 640 пикселей. - person Sudheer; 30.09.2014
comment
Большое спасибо Сай! :-) - person Martin Nielsen; 01.10.2014