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

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

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


javascript css screen-size
person Evanss    schedule 02.03.2011    source источник
comment
Вы имеете в виду разрешение экрана?   -  person NibblyPig    schedule 02.03.2011
comment
Да, обновил вопрос. Спасибо   -  person Evanss    schedule 02.03.2011
comment
Мне нравится дизайн этого сайта.. css-tricks.com   -  person Sen Jacob    schedule 23.12.2012

Ответы (1)


arrow_upward
10
arrow_downward

Чтобы просто ответить на ваш вопрос: нет. Даже если бы это было так, создание нескольких файлов 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/

    Экран @media и (max-width:960px) { h1, h2 { color:#990000; размер шрифта: 1.4em; } }

    Экран @media и (max-width:1280px) { h1, h2 { color:#336699; размер шрифта: 1.8em; } }

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

Получите максимальную отдачу от затраченных средств. Плавный дизайн, @media запросы, javascript для устранения некоторых пробелов. Вы получите меньше кода, более перспективный дизайн и больший процент довольных посетителей.

person Dawson    schedule 02.03.2011
comment
Для меня создание некоторых дополнительных стилей не является большой проблемой с точки зрения обслуживания, проверки на будущее и т. Д. Мой клиент будет решать, захочет ли он платить дополнительно, и я думаю, что они это сделают. Кроме того, хотя эти сайты новые, у меня нет пользовательских данных для работы с разрешениями экрана. Многие сайты останутся с низким трафиком, поэтому у меня никогда не будет достаточно данных. - person Evanss; 03.03.2011
comment
Я думал сделать стандартный дизайн 960, а затем изменить его для больших дисплеев и выбрать новый css с медиа-запросами. Поскольку ссылка, которую вы мне дали, относится к W3C, могу ли я предположить, что она широко поддерживается и соответствует стандартам и т. д.? Спасибо - person Evanss; 03.03.2011
comment
Еще одна вещь, делают ли это какие-либо известные сайты? Я уверен, что у крупного бренда, заботящегося об имидже, есть ресурсы для использования этой технологии. Опять же, это кажется слишком хорошим, чтобы быть правдой, и, поскольку я не слышал много тематических исследований, я немного нервничаю. Спасибо - person Evanss; 03.03.2011
comment
Дополнительные стили (моды на ключевые классы, id), да - не сильно. Это был бы необходимый компонент для гибкого сайта, который хорошо работает в наборе размеров браузера/экрана. Запросы @media — это CSS3, поэтому не каждый браузер их распознает; однако для преодоления этого разрыва был создан плагин jQuery. Вы также упомянули стандарт 960... В настоящее время я работаю в системе 978, которая работает (я думаю) немного лучше. Перейдите по этой ссылке: 978.gs. Посмотрите на демо, затем проверьте исходный код. Этот конкретный сайт использует как @media, так и метод jQ. - person Dawson; 03.03.2011
comment
Ваш последний комментарий был интересен... так что я вынюхал. www.apple.com (внутри домашней страницы <head>); www.adobe.com - (внутри домашней страницы-martha.css) --› Они довольно известны :-). Вот интересная статья на эту тему: 24ways.org/2010/life-beyond-media- запросы - person Dawson; 03.03.2011
comment
ХОРОШО. Итак, я думаю, что я собираюсь сделать дизайн для 960, а затем загрузить дополнительные стили с помощью медиа-запросов, чтобы дизайн выглядел немного лучше в больших браузерах. 960 всегда должен работать в качестве резервной копии, и если большие стили не всегда загружаются, то это нормально. Спасибо Доусон. - person Evanss; 04.03.2011
comment
Рад помочь. Похоже, у тебя есть план. - person Dawson; 05.03.2011