Лучший способ использовать медиа-запросы для мобильных дизайнов

Question

Я знаю, что такое медиа-запросы и почему они используются, но я не уверен, как лучше разработать мобильный сайт с их помощью.

Пример: у меня есть сайт mysite.com, на которомтаблица стилей со всеми необходимыми стилями (скажем, это довольно большой файл).На данный момент ни один из моих стилей не ориентирован на более низкое разрешение экрана или другие устройства.

Затем я решаю сделать мобильную версию своего сайта.Чтобы сделать это проще, я пока нацелился только на пользователей iPhone, и если код обнаружит, что кто-то посещает мой сайт на iPhone, он получит мобильную версию.

Мой вопрос (ы): Где лучше?место для включения этих дополнительных стилей, чтобы пользователь увидел мобильную версию?Должен ли я включить эти стили в исходную таблицу стилей или было бы лучше, если бы я выделил их в их собственную таблицу стилей?

Скажите, что мой сайт полностью создан с использованием поплавков, но моя мобильная версия будет отображать всеэлемент сложен друг на друга.Как мне показать, что с помощью медиа-запросов?Это так же просто, как объявление float: нет;или что-то?

По сути, я пытаюсь спросить в приведенном выше абзаце, как мне построить свою таблицу стилей так, чтобы, например, основные цвета и, возможно, позиции ссылок или что-то еще сохранялось в мобильном телефоневерсия, как в настольной версии, но с такими отличиями, как наложение всего друг на друга в мобильной версии?

Являются ли правила в разделе медиазапросов таблицы стилей в основном «перевешивающими» то, что вы »Вы объявили в разделах не медиа-запросов?

Я нашел много примеров использования медиа-запросов, но я не могу найти один работающий пример полного сайта.Если у меня есть ссылки на mobile.css и main.css на одной странице HTML, как они работают вместе, чтобы сохранить некоторые аспекты моего сайта в мобильной версии, но изменить другие?

Последний вопрос: возможно ли это?иметь полностью фиксированный дизайн, но при этом использовать медиа-запросы?Код по-прежнему сможет определять, когда браузер сжимается или расширяется после определенной ширины / высоты, верно?

Извините за длинный и, вероятно, запутанный вопрос.Я надеюсь, что вы можете сказать, что я пытаюсь спросить.

Answer 1

Есть (по крайней мере!) Четыре способа сделать это:

1. Обычный CSS с медиазапросами внизу (поэтому они переопределяют CSS выше)
2. Two (или более) CSS-файлы, загруженные с использованием медиа-запросов к элементу ссылки
3. Обнаружение на стороне сервера, которое добавляет различные CSS-ссылки в HTML
4. Обнаружение на стороне сервера, затем перенаправление на m.example.com илиexample.com/mobile

Если вы говорите о незначительных изменениях (float: none, шрифты другого размера и т. д.), я бы пошел на 1. Если в CSS есть много-много изменений,Я бы использовал 2 или 3 (3 не так хорош, как вы полагаетесь на useragents, а не свойства экрана).Если HTML и CSS изменятся, я бы использовал 4.

. Для всего этого проверьте свою работу в Internet Explorer 6 - 8, они могут игнорировать медиазапросы и использовать весь CSS, включая биты мобильных устройств.если вы используете 1.

Посмотрите на http://mediaqueri.es/ для некоторых примеров сайтов, использующих 1 и 2.

Вот еще один ресурс, который может помочь: https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4

Answer 2

Я бы не рекомендовал вариант 3. Снова нюхание было признано плохим выбором.Что происходит, когда устройство / браузер отображает неверную информацию?Его легко угнать.

Не делай этого.Медиа Запросы полностью.Это поддерживаемый стандарт.

Answer 3

Я бы посоветовал вообще не дурачиться с обнаружением мобильного браузера / устройства; это где медиа запросы превосходят. Думайте более органично, и вместо того, чтобы постоянно обновлять ваш сайт новыми устройствами и мобильными браузерами, просто используйте один файл CSS и используйте CSS3 max-width / max-device-width.

Поместите <meta name="viewport" content="width=device-width"/> в заголовок и в своем CSS-файле проанализируйте его в настольную и мобильную версии:

/* Desktop Version */

@media screen {
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        text-align: center;
        background-color:#900;
        background-image:url(../images/bg_white.png);
        background-repeat: repeat-y;
        background-position: center top;
    }
}

/* SmartPhone Version */

@media only screen and (max-width: 480px), only screen and (max-device-width: 640px) {
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        text-align: center;
        background-color:#900;
        background-image:url(../images/m_bg_white.png);
        background-repeat: repeat-y;
        background-position: center top;
    }
}

Answer 4

Я бы порекомендовал вариант 3.

Пользовательский агент, сниффинг для обнаружения устройств, неплох.В течение многих лет он постоянно использовался для создания мобильных веб-сайтов.Используя Обнаружение устройства PHP , вы получаете больший контроль над своим сайтом на разных устройствах.Вы можете не только выбирать, какие файлы CSS отправляются на какое устройство, но и выбирать, какие ресурсы / разметку загружать для каждой категории устройств;мобильный телефон, планшет, настольный компьютер, телевизор и т. д.

С помощью этого метода вы можете убедиться, что мобильные устройства не получают ресурсы / стили / разметку рабочего стола и наоборот, даже если JavaScript отключен.