У меня есть два устройства, над которыми я тестирую дизайн сайта. Samsung Galaxy Nexus и планшет Asus Nexus 7. Мне очень сложно выяснить, как настроить таргетинг на отдельные устройства с помощью медиа-запросов. Я не уверен, какие значения использовать для max-width или использовать max-device-width. Также я не могу понять, какой порядок поставить медиа-запросы в...
В соответствии с: http://responsejs.com/labs/dimensions/
- Galaxy Nexus Portrait:
document.documentElement.clientWidth = 360 - Galaxy Nexus Пейзаж:
document.documentElement.clientWidth = 598 - Nexus 7 Портрет:
document.documentElement.clientWidth = 603 - Nexus 7 Пейзаж:
document.documentElement.clientWidth = 966
Мне нужно настроить таргетинг на следующее:
- Портрет и планшет Galaxy Nexus
- Портрет Galaxy Nexus
- Планшет Galaxy Nexus
- Портрет и планшет Nexus 7
- Портрет Nexus 7
- Планшет Nexus 7
Я попробовал следующее для тестирования, но не имел хороших результатов... Не уверен, что я делаю неправильно. Я как бы просто играл с цифрами, пытаясь понять, что сработало, а что нет...
/* Galaxy Nexus (portrait and landscape) ----------- */
@media only screen and (min-device-width : 360px) and (max-device-width : 598px) {
ul.top-menu { background: red; }
}
/* Galaxy Nexus (landscape) ----------- */
@media only screen and (min-width : 361px) and (orientation: landscape){
ul.top-menu { background: blue; }
}
/* Galaxy Nexus (portrait) ----------- */
@media only screen and (max-width : 360px) and (orientation: portrait) {
ul.top-menu { background: purple; }
}
/* Nexus 7 (portrait and landscape) ----------- */
@media only screen and (min-device-width : 603px) and (max-device-width : 966px) {
ul.top-menu { background: yellow; }
}
/* Nexus 7 (landscape) ----------- */
@media only screen and (min-width : 604px) and (orientation: landscape) {
ul.top-menu { background: green; }
}
/* Nexus 7 (portrait) ----------- */
@media only screen and (max-width : 603px) and (orientation: portrait) {
ul.top-menu { background: orange; }
}
И FYI Я знаю, что вы на самом деле не должны быть настолько конкретными, ориентируясь на отдельные устройства при выполнении адаптивного дизайна, но я делаю это в основном для тестирования и должен делать это в этом случае. Любая помощь будет оценена.
