Как от процентов отнять пиксели css

Обновлено: 04.07.2024

Существует много свойств CSS, которые требуют размер в качестве единицы:

font-size определяет размер текста;
border-width определяет толщину границ элементов;
margin определяет пространство между элементами;
left / right / top / bottom позволяют позиционировать и перемещать элементы.

Наиболее часто используемые единицы:

px для пикселей;
% для процентов;
em для определения размера относительно родительского значения font-size .

Пиксели

Поскольку компьютерные экраны используют пиксели для отображения содержимого, это самая распространённая единица размера в CSS.

Пиксель может быть использован для задания фиксированной ширины элемента:

Или установить размер текста:

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

Они также широко используются для позиционирования и расстояния.

Проценты

Проценты — это относительные единицы: они полагаются на родителя и/или предка элемента.

К примеру, блочные элементы, такие как абзацы, естественным образом занимают всю доступную ширину. Следующее правило CSS изменит их размер до половины доступной ширины.

Проценты могут помочь задать другие свойства CSS, такие как размер текста.

em является относительной единицей и зависит от значения font-size элемента.

Например, если у родителя font-size задан как 20px и вы применяете font-size: 0.8em к дочернему элементу, то этот дочерний элемент будет отображать font-size как 16px.

Не следует путать размер em с селектором em , который ориентирован на элемент <em> .

Единица em интересна для определения размера шрифта элементов HTML относительно друг друга. Для создания привлекательной и комфортной для чтения веб-страницы вам необходимо обеспечить визуальную глубину. Например, вы хотите, чтобы ваши <h1> были вдвое больше, чем основной текст, ваши <h2> в 1,5 раза больше, а боковая панель немного меньше. Это можно легко получить в CSS:

Если вы решите изменить размер текста <body> , относительные размеры заголовков и боковой панели изменятся соответственно и ваша веб-страница останется визуально сбалансированной.

Только изменив одно значение, поменяются и все остальные значения:

Единица rem похожа на em, но вместо зависимости от родительского значения, она опирается на значение корневого элемента, которым является элемент <html> .

Разница между rem и em в том, что значение rem фиксировано, в то время как значения em умножаются друг с другом.

Если вы установили html < font-size: 18px; >:

2rem всегда будет равно 36px, независимо от того, где оно используется в вашем CSS;
2em всегда будет равно удвоенному font-size родителя, что не обязательно равно 36px.

Быстрый пример, где 2em отличается от 2rem:

<span> полагается на значение font-size у <р> , в то время как <strong> полагается на значение font-size у <html> .

Какую единицу использовать?

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

Проценты и значения em могут быть использованы наряду с пикселями, особенно для относительных размеров текста.

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

У меня есть контейнер div, для которого я не хочу устанавливать высоту (потому что она будет меняться в зависимости от того, где на сайте она находится), а внутри нее находится заголовок div, а затем неупорядоченный список элементов, все с примененным к ним CSS. Это выглядит примерно так:

Я хочу, чтобы неупорядоченный список занимал оставшуюся комнату в контейнере div, зная, что заголовок div имеет высоту 18px. Я просто не знаю как задать высоту списка, как "результат 100% минус 18px". У кого-нибудь есть советы в этой ситуации?

Я понимаю, что это старый пост, но, учитывая, что он не был предложен, стоит упомянуть, что если вы пишете для CSS3-совместимых браузеров, вы можете использовать calc :

стоит отметить, что не все браузеры в настоящее время поддерживают стандартную функцию CSS3 calc (), поэтому для реализации конкретных версий функции браузера может потребоваться следующее:

для немного другого подхода вы можете использовать что-то вроде этого в списке:

это работает до тех пор, пока родительский контейнер имеет position: relative;

Я использую Jquery для этого

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

не определяйте высоту как процент, просто установите top=0 и bottom=0 , например:

предполагая высоту заголовка 17px

используйте отрицательные поля на элементе, который вы хотели бы минус пикселей. (необходимый элемент)
сделать overflow:hidden; на содержащий элемент
переключатель overflow:auto; на нужном элементе.

это сработало для меня!

попробуйте размер коробки. Для списка:

конечно, родительский контейнер должен иметь что-то вроде:

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

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

на нашем элементе окна мы добавили поле 20px, которое способствует позиционированию относительно других элементов на экране, но не способствует "размеру" окна. Затем заголовок окна позиционируется абсолютно (что удаляет его из потока других элементов, поэтому он не будет вызывать смещения других элементов, таких как неупорядоченный список), а его верхняя часть-20px, которая помещает заголовок внутри края окна. Наконец, наш элемент ul добавляется в окно, и высота может быть установлена на 100%, что заставит его заполнить тело окна (за исключением поля).

Спасибо, я решил мой с вашей помощью, немного подправив его, так как я хочу div 100% width 100% heigth (меньше высоты нижней панели) и без прокрутки на теле (без взлома / скрытия полос прокрутки).

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

что разница в том, что один из элементов динамической области добавляет дополнительное нижнее отверстие, от которого я не знаю, как избавиться. это тег видео (HTML5), обратите внимание, что я поставил этот тег видео с этим css (так что нет причин для него делать нижнее отверстие, но это так):

objetive: есть видео, которое занимает 100% Брауэра (и динамически изменяется при изменении размера браузера, но без изменения соотношения сторон) меньше нижнего пространства, которое я использую для div с некоторыми тексты, кнопки и т. д. (И, конечно, валидаторы w3c и css).

EDIT: я нашел причину, тег видео похож на текст, а не на элемент блока, поэтому я исправил его с помощью этого css:

Примечание display:block; на видео тег.

другой способ достичь той же цели:flex коробки. Сделайте контейнер коробкой flex столбца, и тогда у вас есть вся свобода, чтобы позволить некоторым элементам иметь фиксированный размер (поведение по умолчанию) или заполнять/сжимать пространство контейнера (с flex-grow:1 и flex-shrink:1).

Примечание: Вы также можете использовать стенографию свойство:

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

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

mаrgin: 36рх аutо;

Противные, гадкие пиксели. Терпеть их не можем!

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

mаrgin: 36рх аutо;

Рис. 2.16. Наш контейнер изменяется в размерах при любом изменении размера окна браузера

Пока все идет неплохо. Теперь давайте примемся непосредственно за модуль .blоg . Чуть ранее, когда мы играли с пикселями, то установили следующее правило:

mаrgin: 0 аutо 53рх;

Теперь вместо величины в пикселях мы должны выразить ширину элемента .blоg в пропорциональных величинах: описать ее как процент ширины содержащего его элемента. И вот здесь нам снова пригодится формула tаrgеt соntехt = rеsult .

Давайте разделим ширину .blоg ( 900 ) на его контекст ( 960 ):

900 / 960 = 0,9375.

У нас получилось 0,9375. Число выглядит не особенно впечатляюще. Но, передвинув запятую на два знака, мы получаем 93,75 % и заносим их прямо в СSS:

mаrgin: 0 аutо 53рх;

width: 93,75 %; /* 900рх / 960рх */

(Так же как и в случае с размерами шрифтов, я записал формулу в поле комментария справа от значения ширины ( width ). Это, разумеется, дело вкуса, но я нахожу это очень полезным.).

Итак, с двумя элементами мы разобрались. Но что делать с колонками?

566 / 900 = 0,628888889.

331 / 900 = 0,367777778.

Передвинув запятую на два знака, мы получаем в итоге 62,8888889 % для блока . mаin и 36,7777778 % для блока .оthеr :

width: 62.8888889 %; /* 566рх / 900рх */

width: 36.7777778 %; /* 331рх / 900рх */

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

Применение атрибута font-size для масштабирования текста является одним из самых сложных аспектов стилевого оформления в CSS. CSS предлагает четыре единицы для измерения размера текста, отображаемого в веб-браузере. Какая из этих четырех единиц наиболее подходит для веб-документов? Этот вопрос вызвал множество обсуждений и споров. Дать однозначный ответ на такой вопрос сложно.

Знакомимся с единицами

Эм (em): em это масштабируемая единица, которая используется для веб-документов. Один em равняется текущему размеру шрифта. Например, если размер шрифта документа 12pt , то 1em равняется 12pt . Поскольку em масштабируется, то 2em равняется 24pt , .5em равняется 6pt и т.д. Благодаря своей масштабируемости и высокой совместимости с мобильными устройствами, em все чаще используется в веб-документах.

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

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

В чем же различие?

Разницу между этими единицами легко понять на конкретных примерах. Вот как они соотносятся друг с другом: 1em = 12pt = 16px = 100%. Давайте посмотрим, что произойдет, когда мы увеличим основной размер шрифта (используя CSS-селектор body) с 100% до 120%.

Как видите, Эм и Процент увеличиваются по мере увеличения основного размера шрифта, а Пиксели и Точки – нет. Легко использовать абсолютный размер для вашего текста, но намного легче использовать масштабируемый текст, который отображается на любом устройстве. Поэтому для текста веб-документа предпочтительнее использовать единицы Эм и Проценты.

EM или Процент?

Мы выяснили что Точка и Пиксель не лучшие единицы для веб-документов. Итак, у нас остались Эм и Процент. Теоретически, Эм и Процент – одинаковые единицы, но на практике между ними есть мелкие различия, которые нельзя не учитывать.

В приведенном выше примере мы использовали единицу Процент в качестве базового размера шрифта (для тэга body ). Если вы измените базовый размер шрифта с Процентов на Эм (т.е. body < font-size: 1em; >), то разницы вы, скорее всего, не заметите. Давайте посмотрим, что произойдет, когда размером шрифта для body является 1em , и когда клиент меняет в браузере настройку «Размер текста» (такая настройка доступна в некоторых браузерах, например в Internet Explorer).

Когда размер текста в браузере клиента установлен на «средний» (medium), между Эм и Процентом различий не наблюдается. Но если эту настройку изменить, то разница станет вполне заметной. При настройке «Самый мелкий» (Smallest) Эм оказываются намного мельче, чем Проценты. А при настройке «Самый крупный» (Largest) все наоборот – Эм намного больше, чем Проценты. Можно сказать, что единицы Эм масштабируются, как им и положено делать, но на практике такой текст масштабируется слишком резко, и на некоторых устройствах самый мелкий текст становится нечитаемым.

Вывод

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

Победитель: процент (%).

Обычно когда я создаю новый дизайн, то для элемента body я использую проценты ( body < font-size: 62.5%; >), а затем использую em для дальнейшего масштабирования. Пока в настройках для body используется единица Процент, вы можете использовать либо Процент, или Эм для любых других правил и селекторов CSS и при этом пользоваться преимуществами, которые дает использование Процента в качестве основного размера шрифта.

За последние несколько лет такая практика стала очень распространенной в веб-дизайне.
Пиксели сейчас используются в качестве допустимых единиц размера шрифта (для чтения мелкого текста пользователи могут использовать функцию браузера «зум»). Однако использование пикселей становится проблематичным из-за мобильных устройств с экранами с очень высокой плотностью пикселей (некоторые устройства Android и iPhone имеют плотность в 200-300 пикселей на дюйм, в связи с чем шрифты в 11 и 12-пикселей становятся плохо различимыми). Итак, я продолжаю использовать Процент в качестве основного размера шрифта для веб-документов.

Читайте также: