Разве плохо работать с пикселями в CSS?
Разве это плохо с точки зрения совместимости использовать числа пикселей в CSS вместо процентов? Как насчет более низких разрешений? Можно ли работать с ними в диапазоне от 1 до 100?
13 ответов
Все измерения имеют свои собственные цели:
Используйте пиксели для основанных на пикселях вещей, таких как границы. Возможно, вам не нужна граница шириной 1,3422 пикселя.
Используйте текстоцентрические меры (em, ex) для текстовых объектов, таких как области содержимого, метки и поля ввода. Это простой способ убедиться, что у вас есть место для текста определенной длины и ширины.
Используйте проценты для оконных вещей, таких как столбцы.
Есть исключения, конечно. Например, вы можете указать минимальную ширину столбца в пикселях. Но следуйте вышеизложенному, и ваши страницы будут хорошо масштабироваться. ВСЕГДА увеличивайте и уменьшайте масштаб ваших страниц, чтобы увидеть, как они работают с различными размерами шрифтов и формами браузера - не удивляйтесь позже.
Это сложный вопрос, потому что ответ в основном зависит от вашей ситуации.
Пиксели не так уж и плохи, я в основном их тоже использую. (Иногда даже для размеров шрифта.)
Я обычно фиксирую элемент внешнего блока макета заданным размером (пиксели с разметкой фиксированной ширины и проценты с разметкой жидкости), а на внутренних элементах я обычно устанавливаю проценты всякий раз, когда это возможно.
Есть некоторые элементы, которые просто нельзя стилизовать с процентами или emс, особенно более причудливые вещи от графических дизайнеров, которые не понимают таких принципов.
Например: если у вас есть столбец на вашем сайте с простым стилем, вы можете легко установить его ширину в процентах, но если у него есть фоновое изображение с определенной шириной, которое не разработано с учетом масштабирования, оно выглядит только хорошо с фиксированной шириной. В таких случаях вам нужно убедиться, что остальная часть страницы правильно занимает оставшуюся ширину.
Обратите внимание, что вы можете использовать пиксели с процентами вместе.
Например, это фрагмент одного из моих последних веб-приложений:
min-width: 800px;
width: 80%;
max-width: 1500px;
Выбор также зависит от того, какой дизайн или макет вы хотели бы достичь.
Для макета с фиксированной шириной значения в пикселях подойдут. Если дизайнер дает вам изображение в Photoshop, которое содержит действительно причудливые вещи, которые было бы чрезвычайно сложно даже подумать о том, как они будут изменять размер, вам определенно следует пойти на это.
Если ваш макет должен быть динамическим, вы должны использовать проценты, чтобы убедиться, что он расширяется при изменении разрешения, и вы можете использовать приведенный выше фрагмент кода, чтобы он выглядел лучше в сценариях, где он иначе выглядел бы безумным.
Некоторые макеты (например, представьте, что Stackru будет занимать все пространство) выглядят довольно уродливо на ширине, например. 1920 пикселей - ширина линий будет настолько безумно высокой, что читать будет крайне неудобно.
Это то, что max-width для. Даже в некоторых динамических макетах вам придется ограничивать максимальную ширину вашего сайта, чтобы максимизировать удобство использования и читаемость.
А также принять во внимание меньшие экраны.
Это правда, что никто больше не использует настольные компьютеры с разрешением 800×600, но многие люди просматривают в Интернете мобильные устройства с еще меньшим разрешением.
Это то, что min-width для: чтобы ваш динамически расширенный макет выглядел менее загруженным при меньших результатах.
Надеюсь, это поможет.
РЕДАКТИРОВАТЬ:
У Smashing Book есть несколько очень хороших мыслей на эту тему.
РЕДАКТИРОВАТЬ 2:
Я не хочу, чтобы мой пост звучал так, как будто я хочу, чтобы вы навязывали посетителям размеры на основе пикселей.
(Видимо, некоторые люди в комментариях меня не так поняли.)
Чтобы прояснить это:
Я считаю, что идеальный макет - это тот, который хорошо подстраивается под любое возможное разрешение или настройку.
Однако мы не всегда можем все делать идеально. Время / ресурсы и целевая аудитория являются ключевыми для определения того, требует ли ваш сайт такой расширенной функциональности или нет.
Я предлагаю вам использовать правильную вещь для данной работы.
Если вы разрабатываете сайт, на который будет приходиться значительный процент посетителей, которым требуются более сложные настройки сайта, это может стоить того.
(Конечно, иногда мы просто делаем это для себя, чтобы чувствовать себя правильно, но это не всегда финансово обоснованное решение.)
Тем не менее, прежде чем принимать решение о макетах и стоит ли уделять время тому, чтобы сделать их текучими или более динамичными, вам следует тщательно изучить, какой это будет сайт, кто будет посетителями и тому подобное.
Размер шрифта
Я думаю, что вы должны сначала понять проблемы, которые существуют с работой с пикселями в CSS:
- Увеличение в старых браузерах не работает. Например, IE6 и IE7 не изменяют размер текста при масштабировании. Высота строки тоже может быть странной. Эти проблемы не существуют в современных браузерах, но они являются причиной, почему многие избегают использовать пиксели для размеров шрифта.
- Все увидят текст одинакового размера, если вы укажете размер шрифта в пикселях. Браузеры имеют размер по умолчанию 16px для абзацев, поэтому, если вы используете только
emи другие относительные размеры, вы будете уважать решение пользователей, которые изменяют это. Это особенно важно для текстовых сайтов, особенно если есть более старые пользователи. С другой стороны, если дизайн сайта важен, я думаю, что это возможно и оправданно использоватьpxуказать размеры шрифта, не нарушая юзабилити.
В конце концов, вам нужно принять решение самостоятельно, и это зависит от конкретных обстоятельств, но я думаю, что указание размеров шрифта в пикселях - это нормально.
Кстати, при работе с em чтобы указать размер шрифта, рекомендуется установить body в font-size: 62.5%, Это означает, что базовый размер шрифта составляет 10px, поэтому 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.
Это зависит от того, что вы стилизуете. Например, для столбцов ширина должна зависеть от размера текста, чтобы он выглядел оптимально на нескольких разрешениях / экранах. Если вы хотите разделить свою страницу на две части, вы должны использовать проценты. Но если вы хотите, чтобы граница между этими двумя частями составляла 1 пиксель, независимо от разрешения, используйте пиксели.
В основном это зависит от того, кто вас нанимает, и, следовательно, от аудитории вашей работы. В организационных целях (где контент должен преобладать над формой, например, в правительственном проекте), вам лучше работать с.em или%, их сложнее контролировать, но они будут действительно удобны для пользователя с точки зрения доступности.
Если говорить о корпоративных веб-сайтах (где форма - это сделка), пиксель будет более точным инструментом для удовлетворения ожиданий ваших клиентов относительно его бренда. Жидкий интерфейс (%, .em) всегда хорош, когда он сделан грамотно, но не забывайте проверять свой дизайн в экстремальных условиях и быть уверенным, что он будет стабильным.
Если вы работаете с пикселями, вы будете иметь абсолютный контроль над окончательным видом вашего сайта, но вам придется предположить, что какой-то пользователь не сможет эффективно с ним работать.
Лучший вариант: вместо того, чтобы разрабатывать веб-сайт, совместимый со всеми платформами (что приведет к дизайну с множеством недостатков), предложите своим клиентам специальные версии сайта, адаптированные к каждому требованию, что является лучшей практикой и лучшим бизнесом для дизайнера...
Я бы сказал, избегайте этого, если это возможно, за исключением некоторых случаев.
Например, для тонкой границы можно просто указать 1px.
Также для max- а также min- Атрибуты стиля это нормально. Но тогда сделайте атрибут non-max/min процентным, если это возможно.
Это действительно хороший вопрос, который я задавал много раз раньше. Не будучи хардкорным веб-дизайнером (я больше занимаюсь разработкой), я обычно спрашиваю дизайнеров, с которыми я работаю, об их мнении, и вот что я искал:
Использование процентов по отношению к пикселям для определения размера элементов и т. Д. На самом деле зависит от личного вкуса или требований в каждом конкретном случае. Если вам нужно масштабировать, или он будет хорошо масштабироваться, используйте проценты. Если нет, используйте пиксели. Люди здесь использовали примеры основных столбцов на странице, возможно, они должны быть плавными, но границы могут нуждаться в точности измерения пикселей.
Очевидно, что размер изображений в значительной степени привязан к их разрешению и единицам пикселей, поэтому я всегда использую их в этом случае.
Однако использование размеров текста к размеру пикселя или даже точки для текста - это совсем другой котелок рыбы. Большинство парней, с которыми я работаю, имеют базовый стиль сброса размеров шрифта, который уменьшает размер 1em до 12px. Затем они используют ems повсюду (или настолько близко, насколько это возможно) для определения размера текстовых элементов, элементов управления формы и тому подобного. Это то, как я сейчас работаю, так как кажется, что он хорошо работает в различных браузерах, операционных системах и DPI на десктопах и ноутбуках. Я не могу поручиться за мобильные устройства, хотя.
Доступность является ключевым моментом - если вам нужно сделать что-то полезное для людей с ограниченными возможностями или работать на различных устройствах из коробки, даже вещи, которые вы можете считать старыми, то масштабирование будет требованием. Встраивайте его в свою модель для проектирования сайта с самого начала, и вы можете понять, что в этом случае абсолютный размер пикселя даже не требуется.
Например, художественный дизайн, вероятно, будет спроектирован в одном масштабе, но новый образовательный веб-сайт для пользователей с ограниченными возможностями будет работать в различных ситуациях.
Просто помните, что W3C использует различные методы для определения размеров и масштабирования в своих спецификациях по причине гибкости. Делайте то, что подходит лучше всего и хорошо работает для вашей аудитории (как говорил Мустард ранее).
Делай правильно по умолчанию. Если пользователь заходит на ваш сайт с отключенным JavaScript и предпочтительными файлами cookie, вам следует предоставить ему веб-страницу, которая будет максимально функциональной и доступной.
Ваша таблица стилей поумолчанию не должна иметь ничего общего с окном браузера и по-прежнему отображать функциональную страницу, пусть и отвратительную, с разрешением 320x320 и неограниченными размерами. Если фотографическая точность настолько важна, что вы не можете доверять масштабированию браузера, а иногда и так, то вам следует использовать измерения пикселей (по крайней мере, минимумы) для элементов, инкапсулирующих изображения фиксированного размера, чтобы убедиться, что вы не получите важные вещи скрываются. Указание минимальной ширины вместе с процентами должно дать вам необходимый контроль, предоставляя пользователям доступность, в которой они нуждаются. Даже если доступность не является проблемой сейчас, это будет позже, если сайт будет успешным.
Если вы знаете больше об окне браузера, тогда можно использовать фиксированную ширину в альтернативных таблицах стилей, если важность сохранения дизайна оправдывает добавленную работу.
Я не эксперт по CSS / HTML, но я использую соглашение, чтобы использовать пиксели для внешних контейнеров и проценты для внутренних объектов.
Еще одно эмпирическое правило, с которым я проверяю макет, - это правило трех пикселей. Редко, чтобы все выстраивалось точно в каждом браузере. Мы согласились, что усилия перевешивают преимущества перемещения чего-либо на три пикселя или меньше.
Это нормально, если это то, что нужно, чтобы угодить вашему клиенту. Большую часть времени вы не можете сбалансировать количество места на экранах разных размеров только с процентами. Медиа-запросы CSS3 помогают здесь, но принятие все еще проблематично.
Если вы ориентируетесь на фиксированный размер, то пиксели в порядке. Но если вы хотите, чтобы ваш макет хорошо выглядел при разных разрешениях / размерах экрана, вам следует придерживаться более относительных показателей, таких как проценты. Большинство людей нацелены на последнее.
Я предпочитаю пиксель в большинстве случаев. Например - ширина контента по умолчанию: 960px. В "1024" все будет хорошо, с небольшими свободными местами по обе стороны экрана. Поместите некоторый градиент или фон там. В "1280" или "1440" или "1680", или как угодно - будет все больше и больше разрывов, но это будет выглядеть красиво. Да, за 800 - этот сайт будет некрасивым. Но кого это волнует? Каждый крупный игрок отказался от поддержки 800. Слишком мало людей с этим разрешением.
Есть много различных сайтов, где %% будет гораздо лучшим решением.
Строительные блоки экрана - это пиксели. Вы не ошибетесь с фиксированными размерами пикселей. Как упоминалось в других постерах, вы также можете использовать проценты или "em" для масштабируемой замены.