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

Ответ 1

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

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

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

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

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

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

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

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

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

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

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

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

EDIT:

Smashing Book имеет некоторые очень приятные мысли о предмете.

ИЗМЕНИТЬ 2:

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

Чтобы очистить его:

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

Я предлагаю вам использовать правильную вещь для данного задания.

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

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

Ответ 2

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

• Использовать пиксели для пиксельных вещей, например, границ. Вероятно, вы не хотите, чтобы граница достигала ширины 1.3422 пикселей.

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

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

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

Ответ 3

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

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

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

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

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

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

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

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

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

Заключение

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

Ответ 4

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

Ответ 5

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

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

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

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

Ответ 6

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

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

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

Ответ 7

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

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

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

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

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

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

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

Ответ 8

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

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

Ответ 9

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

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

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

Ответ 10

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

Ответ 11

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

Ответ 12

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

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

Ответ 13

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