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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Это нормально, если это то, что нужно, чтобы угодить клиенту. Чаще всего вы не можете сбалансировать объем пространства на экранах разных размеров, используя только проценты. CSS3 media queries помогает здесь, но внедрение все еще проблематично.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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