Перевод px - em

@carambaman · Регистрация: 30.04.2013

Студворк — интернет-сервис помощи студентам

Суть такая, мне нужна резиновая верстка, и вычитал что лучше всего использовать em в качестве размеров. И появилась необходимость перевода с px в em. суть в чем, загуглил калькуляторы для этого дела, и они есть. Но к примеру калькулятор дает что 12px это 0.750em. Но визуально это выглядит совершенно по другому. Не пойму в чем дело.

@anonymous_23 · 13.01.2014, 17:35

Прочитай про 'REM'. Иногда очень даже полезная вещь (Усовершенствованные em). А можно сделать так:

CSS
1
2
3
4
5
6
/*  ==========================================================================
    Стили для HTML
    ==========================================================================  */
html{
  font-size: 62.5%;   /* 10/16 */
}

Затем указывать в em всё (в разумных целях), где 1em или 1 rem будет равен 10px. 1.1em = 1.1rem = 11px и тд...

Вот несколько ещё примеров

CSS
1
2
3
4
5
6
7
8
9
10
11
html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */
 
 
 
body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px */
li li, li p /* etc */ { font-size: 1em; }

Vovan-VE · 13.01.2014, 17:35

С одной стороны, px и em — это единицы длины и, казалось бы, должно быть Npx == k * Xem .
Но с другой стороны — это совершенно разные единицы измерения, как граммы и градусы. Никто не знает, чему равно k — оно зависит от массы параметров.

@zenw · 13.01.2014, 17:38

1em - это размер шрифта элемента, а не фиксированное количество пикселов. Если для какого-то элемента размер шрифта 12px, то 1em для него равен 12px, а если, например 30px - то 1em == 30px. Возможно, вы именно этого не учли.

@anonymous_23 · 13.01.2014, 17:41

Сообщение от Vovan-VE

С одной стороны, px и em — это единицы длины и, казалось бы, должно быть Npx == k * Xem .
Но с другой стороны — это совершенно разные единицы измерения, как граммы и градусы. Никто не знает, чему равно k — оно зависит от массы параметров.

Но ведь 1em обычно равен 16px по умолчанию размеры у всех браузеров, затем можно это значение переопределить например в

CSS
1
2
3
html{
//стили
}

а затем определять всех детей в em или rem. Хотя если честно я разницы не замечал (может просто не присматривался)

Vovan-VE · 13.01.2014, 18:07

Сообщение от anonymous_23

Но ведь 1em обычно равен 16px по умолчанию

Вот Вы сами же и говорите, что это не всегда так.

http://www.w3.org/TR/CSS21/syn... ngth-units

The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used.

А какой у кого размер шрифта по умолчанию? У всех разный, потому что настраивается (в десктопах по крайней мере). Плюс еще есть масштаб шрифтов в ОС. Думаю, он тоже внесёт свой вклад.

И, в конце концов, px - это абсолютная единица измерения, а em - относительная. Относительно чего-то там. Тут столько, а там столько.

@anonymous_23 · 13.01.2014, 18:22

Сообщение от Vovan-VE

И, в конце концов, px - это абсолютная единица измерения, а em - относительная. Относительно чего-то там. Тут столько, а там столько.

Да тут нет правильно или не правильно. Всё будет определяться в зависимости от проекта и от того, что именно и как должно работать. На одном думаю зацикливаться не стоит, при правильном использовании всё будет ОК.
P.S. начал отдаляться от темы

@carambaman · 13.01.2014, 19:12 **[ТС]**

ох и дискусию вы развели)))

в общем что я сделал и как решил вопрос.
Прописал для всех елементов font-size: 1em; и далее уже подставлял значения исходя с этого калькулятора http://pxtoem.com/. Выбрал в левой колонке чтобы было 16px-1em и те значения уже ставил

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@carambaman 8 / 8 / 1 Регистрация: 30.04.2013 Сообщений: 75

	Перевод px - em 13.01.2014, 17:10. Показов 4630. Ответов 7 Метки нет (Все метки) Суть такая, мне нужна резиновая верстка, и вычитал что лучше всего использовать em в качестве размеров. И появилась необходимость перевода с px в em. суть в чем, загуглил калькуляторы для этого дела, и они есть. Но к примеру калькулятор дает что 12px это 0.750em. Но визуально это выглядит совершенно по другому. Не пойму в чем дело. Миниатюры 0

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	13.01.2014, 17:35
	С одной стороны, px и em — это единицы длины и, казалось бы, должно быть Npx == k * Xem . Но с другой стороны — это совершенно разные единицы измерения, как граммы и градусы. Никто не знает, чему равно k — оно зависит от массы параметров. 0

@zenw 154 / 110 / 9 Регистрация: 12.06.2013 Сообщений: 168
	13.01.2014, 17:38
	1em - это размер шрифта элемента, а не фиксированное количество пикселов. Если для какого-то элемента размер шрифта 12px, то 1em для него равен 12px, а если, например 30px - то 1em == 30px. Возможно, вы именно этого не учли. 0

@carambaman 8 / 8 / 1 Регистрация: 30.04.2013 Сообщений: 75
	13.01.2014, 19:12 [ТС]
	ох и дискусию вы развели))) в общем что я сделал и как решил вопрос. Прописал для всех елементов font-size: 1em; и далее уже подставлял значения исходя с этого калькулятора http://pxtoem.com/. Выбрал в левой колонке чтобы было 16px-1em и те значения уже ставил 0