CSS медиа запросы для iPhone - PullRequest
Новая
       6

CSS медиа запросы для iPhone

2 голосов
/ 16 марта 2011

У меня есть веб-сайт, который будет отображаться как на рабочем столе, так и на iPhone с использованием медиазапросов для обслуживания различных таблиц стилей, например, ВСЕГДА загружайте reset.css, но если на рабочем столе также загружается desktop.css, но если на iPhone(или если пользователь изменяет размер окна браузера по размеру), вместо этого загрузите iphone.css, НО больше не загружайте desktop.css, а также добавьте в файлы Ориентация.css в зависимости от того, переместил ли пользователь iPhone.

например, 

/*

    Theme Name: mywebsite

*/

@import "reset.css";

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
    @import "desktop.css";
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
    @import "iphone.css";

    @media all and (orientation:portrait)
    {
        @import "iphone-portrait.css";
    }

    @media all and (orientation:landscape)
    {
        @import "iphone-landscape.css";
    }
}

Все это должно быть сделано внутри таблицы стилей из-за того, как я создаю свой веб-сайт, и я хочу использовать только один CSS-файл в HTML.

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

Ответы [ 2 ]

2 голосов
/ 16 марта 2011

Ваш @import должен предшествовать всему другому содержимому вашего CSS.

Если вам нужен только 1 CSS-файл в HTML, почему бы не скопировать и вставить все эти операции импорта и вставить их там, где вы пытаетесь вызвать операции импорта, т.е. 

// css for reset.css

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
    // css for desktop
}
...
1 голос
/ 15 августа 2012

Почему бы вам не использовать CSS для настольных компьютеров в качестве встроенного, и переопределить его с помощью CSS для iPhone? Более того, рабочие столы намного шире этих размеров - (min-device-width: 320px) и (max-device-width: 480px). (min-device-width: 320px) и (max-device-width: 480px) - это размеры iphone / смартфона (большинство из них хотя бы). Следовательно, код должен быть: 

@import "reset.css";

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
@import "iphone.css";
}

//1024px - max width of an ipad, min-device-aspect-ratio - detects desktop
@media all and (min-width: 1024px) and (min-device-aspect-ratio: 1/1)
{
@import "desktop.css";
}
...