Каковы рекомендации для таблицы стилей по умолчанию при использовании запросов CSS @media? - PullRequest
Новая
       4

Каковы рекомендации для таблицы стилей по умолчанию при использовании запросов CSS @media?

1 голос
/ 11 июня 2011

Я только что обнаружил CSS @media запросы , и я думаю, они великолепны! Однако я знаю, что не все браузеры поддерживают их (а именно все, кроме самых последних версий I.E.).

Что мне тогда делать в моей таблице стилей по умолчанию? Я должен предназначаться для экрана нормального размера? Должен ли я пойти по пути наименьшего общего знаменателя и загрузить мобильную таблицу стилей? Или я должен сделать дизайн полностью плавным?

Каков обычно хороший план при создании таблицы стилей по умолчанию для браузеров, которые не поддерживают запросы @media?

1 Ответ

3 голосов
/ 11 июня 2011

Зависит от того, используете ли вы подход «сначала мобильный» или «сначала рабочий стол».

Во-первых, рабочий стол не должен вызывать проблем с браузерами для настольных компьютеров, не поддерживающими @media, поскольку они просто игнорируют правила таблицы стилей для мобильных устройств, как и должны.Единственная проблема - мобильные браузеры, которые не поддерживают медиазапросы.Они будут визуализировать страницу, как видно на рабочем столе.Но большинство смартфонов поддерживают медиазапросы, кроме телефонов pre-win7.Вопрос в том, хотите ли вы поддерживать эти телефоны.Ваша таблица стилей должна выглядеть примерно так. 

body {
  width: 960px;
  margin: 0 auto;
}
@media only screen and (max-width: 500px) {
  /* override desktop rules to accommodate small screens*/
  body{
    width: auto;
    margin: 0;
}

Другой подход - сначала мобильный.Вы создаете базовую таблицу стилей для мобильных устройств, а затем используете медиазапросы, чтобы оживить мысли пользователей настольных компьютеров.Вы можете поместить правила рабочего стола в отдельный файл и использовать медиазапросы и условные комментарии для загрузки в современные браузеры рабочего стола и IE.Но здесь проблема в том, что IE mobile также поддерживает условные комментарии, так что нет поддержки телефона до win7.Ваш HTML должен выглядеть примерно так: 

<link rel="stylesheet" href="/css/basic.css" />
<link rel="stylesheet" href="/css/desktop.css" media="all and (min-width: 500px)" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/desktop.css" />
<![endif]-->

Создание вашего дизайна жидкости очень поможет.Цель в том, что независимо от размера экрана, ваш сайт всегда будет хорошо выглядеть.Просто измените размер окна, чтобы попробовать.Жидкие конструкции не могут заставить вашу боковую панель сместиться вниз, если экран сужается.Для этого вам нужны медиазапросы.

Удачи

...