Плохо ли работать с пикселями в CSS? [закрыто]

Плохо ли с точки зрения совместимости использовать в CSS номера пикселей вместо процентов? Как насчет более низких разрешений? Можно ли с ними работать в диапазоне от 1 до 100?

Это сложный вопрос, потому что ответ во многом зависит от вашей ситуации.

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

Есть некоторые элементы, которые просто не могут быть стилизованы с помощью процентов или ems, особенно более модные вещи, исходящие от графических дизайнеров, которые не понимают таких принципов.

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

Обратите внимание, что вы можете использовать пиксели вместе с процентами.
Например, это фрагмент одного из моих последних веб-приложений:

min-width: 800px;
width: 80%;
max-width: 1500px;

Выбор также зависит от того, какого дизайна или макета вы хотите добиться.

Для макета с фиксированной шириной подходят значения пикселей. Если дизайнер дает вам изображение Photoshop, которое содержит действительно причудливые вещи, которые было бы чрезвычайно сложно даже подумать о том, как бы оно изменилось, вам определенно следует пойти на это.

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

Некоторые макеты (например, представьте, что StackOverflow займет все пространство) выглядели бы довольно некрасиво при ширине, например. 1920 пикселей - ширина линий была бы настолько безумно высокой, что читать было бы крайне неудобно.
Это то max-width, для чего. Даже в некоторых динамических макетах вам придется ограничить максимальную ширину вашего сайта, чтобы максимизировать удобство использования и читаемость.

А также обратите внимание на меньшие экраны.
Это правда, что никто больше не использует рабочий стол 800 × 600, но многие люди просматривают Интернет с мобильных устройств с еще меньшим разрешением.
Это то, что min-widthнужно: чтобы ваш динамически расширяемый макет выглядел менее загруженным на небольших разрешениях.

Надеюсь, это поможет.

РЕДАКТИРОВАТЬ:

В Smashing Book есть несколько хороших мыслей по этому поводу.

РЕДАКТИРОВАТЬ 2:

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

Чтобы прояснить это:

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

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

Если вы разрабатываете сайт, который будет привлекать значительный процент посетителей, которым требуется более продвинутая настройка сайта, это того стоит.
(Конечно, иногда мы просто делаем это для себя, чтобы почувствовать, что все делаем правильно, но это не всегда финансово обоснованное решение.)

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

Все измерения имеют свои цели:

• Используйте пиксели для пиксельных элементов , например границ. Вероятно, вам не нужна граница шириной 1,3422 пикселя.

• Используйте текстовые меры (em, ex) для текстовых вещей , таких как области содержимого, метки и поля ввода. Это простой способ убедиться, что у вас есть место для текста определенной длины и ширины.

• Используйте проценты для оконных вещей , таких как столбцы.

Конечно, бывают исключения. Например, вы можете указать минимальную ширину столбца в пикселях. Но следуйте приведенным выше инструкциям, и ваши страницы будут хорошо масштабироваться. ВСЕГДА увеличивайте и уменьшайте масштаб своих страниц, чтобы увидеть, как они работают с разными размерами шрифтов и формами браузера - не удивляйтесь позже.

Размеры шрифта

Я думаю, вы должны сначала понять проблемы, которые существуют при работе с пикселями в CSS:

• Zoom в старых браузерах не работает. Например, IE6 и IE7 не изменяют размер текста при масштабировании . Line-height тоже может быть необычным. Этих проблем не существует в современных браузерах, но они являются причиной того, что многие избегают использования пикселей для размеров шрифтов.
• Все будут видеть текст одинакового размера, если вы укажете размер шрифта в пикселях. Браузеры имеют размер по умолчанию для абзацев 16 пикселей, поэтому, если вы используете только emи другие относительные размеры, вы будете уважать решение пользователей, которые его изменят. Это особенно важно на сайтах с большим объемом текста, особенно если есть более старые пользователи. С другой стороны, если дизайн сайта важен, я думаю, что можно и оправданно использовать pxдля указания размеров шрифта без нарушения удобства использования.

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

Кстати, при работе с emуказать размер шрифта , это хорошая идея , чтобы установить bodyв font-size: 62.5%. Это означает, что базовый размер шрифта составляет 10 пикселей, поэтому 1em - 10 пикселей, 1.6em - 16 пикселей и т. Д., Что упрощает работу с пикселями при проектировании с использованием em . Мне все еще неприятно работать в таком режиме, особенно когда значения em каскадируются. Есть несколько очень удобных сайтов, таких как PXtoEM.com, которые помогают в этом.

Проблемы с макетом

Макет экрана основан на пикселях , поэтому пиксели - это интуитивный выбор для многих вещей. Основная проблема здесь в том, что у разных пользователей разные размеры экрана . Как отмечали другие, использование min-widthи max-widthв пикселях вместе с widthпроцентами является полезным способом соблюдения размера экрана, предотвращая необоснованное сжатие или растяжение вашего сайта в очень маленьких и очень больших окнах.

Однако в целом я бы избегал этого подхода в пользу медиа-запросов CSS . Затем вы можете использовать фрагменты фиксированной ширины и расширять макет (помимо прочего) по мере увеличения размера экрана. Однако медиазапросы CSS, как и все классные веб-технологии, страдают от отсутствия поддержки браузера. В частности, IE8 и более ранние версии не поддерживают их, хотя есть исправления JavaScript. С другой стороны, iPhone и другие портативные устройства поддерживают их, и я настоятельно рекомендую их, если вы хотите, чтобы ваш сайт хорошо смотрелся на этих устройствах.

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

Заключение

В конечном итоге все зависит от ваших пользователей, от того, что вам нужно поддерживать и как вы хотите, чтобы ваш сайт выглядел, но нет ничего плохого в использовании пикселей в CSS .

Это зависит от того, что вы укладываете. Например, для столбцов ширина, вероятно, должна зависеть от размера текста, чтобы гарантировать, что он будет оптимально выглядеть на нескольких разрешениях / экранах. Если вы хотите разделить свою страницу на две части, вы должны использовать проценты. Но если вам нужна граница в 1 пиксель между этими двумя частями, независимо от разрешения, используйте пиксели.

В основном это зависит от того, кто вас нанимает, и, следовательно, от аудитории вашей работы. Для институциональных целей (где контент должен преобладать над формой, например, с государственным проектом) вам лучше работать с .em или%, их сложнее контролировать, но они будут действительно удобными с точки зрения доступности.

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

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

Лучший вариант: вместо того, чтобы разрабатывать веб-сайт, совместимый со всеми платформами (что приведет к многодефицитному дизайну), предложите вашим клиентам специальные версии сайта, адаптированные для каждого требования, что является лучшей практикой и лучшим бизнесом для дизайнера. ..

Я бы посоветовал по возможности избегать этого, за исключением некоторых случаев.

Например, для тонкой границы можно просто указать 1 пиксель.

Также для атрибутов стиля max-и min-стиля это нормально. Но затем сделайте атрибут non-max / min процентным, если это возможно.

Это действительно хороший вопрос, который я задавал много раз раньше. Не будучи заядлым веб-дизайнером (я больше занимаюсь разработкой), я обычно спрашивал дизайнеров, с которыми работаю, их мнение, и вот что я выделил:

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

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

Однако использование размера em вместо размера в пикселях или даже в точках для текста - это совсем другое дело. У большинства ребят, с которыми я работаю, есть базовый стиль сброса размеров шрифта, который снижает размер 1em примерно до 12 пикселей. Затем они используют em повсюду (или как можно ближе к любому другому) для изменения размера текстовых элементов, элементов управления формы и тому подобного. Я тоже так работаю сейчас, поскольку, похоже, он хорошо работает в различных браузерах, ОС и DPI на настольных компьютерах и ноутбуках. Но за мобильные устройства ручаться не могу.

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

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

Просто помните, W3C включил в свои спецификации различные методы определения размеров и масштабирования по одной причине - гибкости. Делайте то, что лучше всего подходит и работает для вашей аудитории (как сказал ранее Мустар).

Я не эксперт по css / html, но я использую правила использования пикселей для внешних контейнеров и процентов для внутренних объектов.

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

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

Ваш умолчанию таблица стилей не должны предполагать ничего в окне браузера, и до сих пор делают функциональную страницу, однако отвратительное, вплоть до разрешения 320x320 и до неограниченных размеров. Если фотографическая точность настолько важна, что вы не можете доверять масштабированию браузера, а иногда это так, то вам следует использовать измерения в пикселях (по крайней мере, минимальные) для элементов, инкапсулирующих изображения фиксированного размера, чтобы убедиться, что вы не получите важные вещи скрываются. Указание минимальной ширины вместе с процентами должно дать вам необходимый контроль, в то же время предоставляя пользователям необходимую им доступность. Даже если доступность не является проблемой сейчас, это будет позже, если сайт будет успешным.

Когда вы делаете больше узнать об окне браузера, то это нормально использовать фиксированные ширины в альтернативных таблицах стилей, если важность сохранения проектным обосновывает добавленную работы.

Если вы ориентируетесь на фиксированный размер, тогда подойдут пиксели. Но если вы хотите, чтобы ваш макет хорошо смотрелся при различных разрешениях / размерах экрана, вам следует придерживаться более относительных показателей, таких как проценты. Большинство людей нацелены на последнее.

Ничего страшного, если это то, что нужно, чтобы доставить удовольствие вашему клиенту. В большинстве случаев вы не можете сбалансировать объем пространства на экранах разных размеров с помощью только процентов. Здесь помогают медиазапросы CSS3, но внедрение все еще проблематично.

Я предпочитаю пиксель в большинстве случаев. Например - ширина содержимого по умолчанию: 960 пикселей. В "1024" все будет нормально, с небольшими свободными местами по обе стороны экрана. Добавьте туда градиент или фон. В «1280», «1440» или «1680», или еще где - то будет все больше и больше зазора, но это будет хорошо смотреться. Ага, за 800 - этот сайт будет некрасивым. Но кого это волнует? Все крупные игроки отказались от поддержки 800. Людей с таким разрешением слишком мало ..

Однако существует множество различных сайтов, где %% будет гораздо лучшим решением.

Строительными блоками экрана являются пиксели. Вы не ошибетесь с фиксированными размерами пикселей. Как упоминалось на других плакатах, вы также можете использовать проценты или «em» для масштабируемой замены.