Определение разрешения экрана для загрузки альтернативного CSS - хорошая идея? - PullRequest
Новая
       6

Определение разрешения экрана для загрузки альтернативного CSS - хорошая идея?

5 голосов
/ 02 марта 2011

Я работаю с графическим дизайнером, который постоянно хочет делать сайты больше 960 пикселей, которые я рекомендую. Я могу сделать определенное количество с жидкими макетами, но id очень нравится иметь возможность загружать разные CSS для больших разрешений. Я гуглил его и нашел ссылку ниже, но я беспокоюсь, что не услышал больше об этом. Это надежный метод? Я обеспокоен, поскольку я думал, что больше людей хотело бы сделать это.

http://www.ilovecolors.com.ar/detect-screen-size-css-style/ Спасибо

1 Ответ

10 голосов
/ 02 марта 2011

Чтобы просто ответить на ваш вопрос: Нет. Даже если это так, кажется, что неэффективно создавать несколько файлов CSS и т. Д. Существуют лучшие методы, чем полагаться на разрешение.

Длинный ответ: Когда 960 станет "о, вот так 2010 ...", сколько ваших сайтов будут выглядеть устаревшими? В то же время, не у всех, кто пользуется интернетом, есть 30-дюймовый дисплей Cinema или установка с двумя мониторами. Я стараюсь максимально приспособить трафик МОЙ .

Хотя было бы неплохо определить ширину окна браузера и / или ширину экрана (разрешение монитора), я думаю, что мнение большинства таково: Знайте свою целевую аудиторию и проектируйте / создавайте ее.

Построение сетки 960 и CSS, затем построение сетки 1024 и CSS = неэффективность, и не очень "будущее".

Если вы просматриваете трафик вашего сайта и видите, что 90% ваших посетителей используют 1 или 2 (или 3) разрешения, создайте гибкий макет, который будет хорошо работать для этой аудитории.

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

  1. Оформление запросов @media для добавления в текучий макет / дизайн. Измените один файл CSS (не 3). http://www.w3.org/TR/css3-mediaqueries/

    @ мультимедийный экран и (максимальная ширина: 960 пикселей) { h1, h2 {цвет: # 990000; размер шрифта: 1.4em; } }

    @ мультимедийный экран и (максимальная ширина: 1280 пикселей) { h1, h2 {цвет: # 336699; размер шрифта: 1.8em; } }

  2. Добавление min- and max- widths к вашему CSS (или аналогичной логике) также может помочь удовлетворить более широкий диапазон разрешений / размеров браузера, а также продлить срок годности вашего дизайна. И не использует для функции document.window.width ().

Получите максимальную отдачу от ваших денег. Жидкие проекты, запросы @media, JavaScript, чтобы помочь преодолеть некоторые пробелы. В итоге у вас будет меньше кода, больше «будущего» дизайна и больший процент довольных посетителей.

...