Эффективное использование в CSS единиц измерения

@Ulfur97 · Регистрация: 10.01.2018

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

Привет.
Изучаю HTML и CSS. Делаю простые страницы. В CSS для задания размеров блоков и шрифтов используются разные единицы измерения: px, em, ex, rem, ch, проценты, vw, vh, vmin, vmax, cm, mm, pc, pt.
Как наиболее эффективно применять единицы измерения? Т.е. какие единицы в каких случаях применять?

@Grey · 13.01.2018, 01:30

не знаю мне 3 единиц хватает.
px для блоков и шрифта фиксированных размеров, проценты для адаптивных блоков, em для адаптивного шрифта.
зачем нужны остальные, смутно помню.
vw, vh вроде задают размер относительно окна или блока.
cm, mm вроде при выводе на печать.

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

@Freeze_Breeze · 13.01.2018, 14:57

Ulfur97,

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

Как наиболее эффективно применять единицы измерения? Т.е. какие единицы в каких случаях применять?

Смотря какая задача перед Вами стоит. Можете почитать про них на этих форумах общая информация, единицы измерения для шрифтов и уже сами решайте, что и какие Вам использовать.
Например: мне нужно, что бы титульная страница сайта была по высоте 100% при любой высоте монитора, при использовании свойства height: 100%; я не получу того эффекта, который мне нужен. А вот использовав свойство height: 100vh; все будет четко и красиво. Так же удобно разделять одну секцию на две одинаковые, то есть каждому блоку задать width: 50vw; и при любой ширине монитора ваши блоки будут занимать каждый по половине (очень удобно). Не знаю как на счет cm, mm, но pc, pt, ch давно уже не используют.

@Ulfur97 · 19.01.2018, 02:42 **[ТС]**

Freeze_Breeze, спасибо за ответ. Кое в чем разобрался.

Поиграл с vw и %.
При первоначальных установках:

CSS

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0;
}

Получается, что:
- vw рассчитывается из общей ширины страницы с учетом скроллбара;
- % рассчитывается из ширины в которую выводится информация.

@Grey · 19.01.2018, 03:09

% рассчитываются от ширины родительского элемента.

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

Добавлено через 9 минут
шрифт в em рассчитывается относительно размера шрифта родительского элемента.
шрифт в rem рассчитывается относительно размера шрифта корневого элемента, html.

CSS

1	html{font-size:100%;}

поменяй размер шрифта в дочерних элементах.

@Ulfur97 · 19.01.2018, 17:42 **[ТС]**

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

шрифт в rem рассчитывается относительно размера шрифта корневого элемента, html.

CSS

1	html{font-size:100%;}

Grey, с какой целью задавать первоначальный размер шрифта для html равным 100%?
Он первоначально может оказаться не 100%?
Эти проценты берутся от установок в браузере?

@aj17 · 19.01.2018, 18:18

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

Он первоначально может оказаться не 100%?

указывается в процентах для более точного управления зависимыми размерами, как правило шрифт в большинстве браузеров по умолчанию равен 16px = 100%, НО, я бы все же рекомендовал писать не в % а в px для селектора html, так как мало ли вдруг настройка браузера стоит специфическая, и по умолчанию шрифт будет равен 20px, тогда все размеры "Поплывут" в сторону гигантизма и наоборот... А с абсолютной величиной этого можно избежать.

@Ulfur97 · 19.01.2018, 23:10 **[ТС]**

Еще такой вопрос. Правильно ли я понимаю, что проценты почти всегда (line-height берется от текущего шрифта) берутся от значений свойств родительского контейнера?
При этом процентные значения для margin и padding вычисляются только из значения ширины родителя, не учитывая сколько параметров (от 1 до 4) указывается для этих свойств. Свойство border с процентами (применение сомнительно) не работает.

CSS

.div1 {
    width: 300px;
    height: 150px;
    border: 20px dotted #333;
}
 
.div2 {
    width: 50px;
    height: 50px;
    margin: 10% 10%;
    padding: 5% 5%;
    border: 20% dotted #333;
    background-color: #0f0;
}

@Grey · 20.01.2018, 00:59

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

Правильно ли я понимаю, что проценты почти всегда (line-height берется от текущего шрифта) берутся от значений свойств родительского контейнера?

похоже, нет. это из ссылки Freeze_Breeze

width/height
Для width/height обычно процент от ширины/высоты родителя, но при position:fixed, процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства "height" в %.

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

Свойство border с процентами (применение сомнительно) не работает.

да, похоже не работает.
сейчас в поймал себя на мысли, что в адаптивной вёрстке никогда не использовал рамки.
ответ на твой следующий вопрос https://habrahabr.ru/post/149441/

@Ulfur97 8 / 1 / 0 Регистрация: 10.01.2018 Сообщений: 35
		1
	Эффективное использование в CSS единиц измерения 10.01.2018, 15:51. Показов 1385. Ответов 8 Метки нет (Все метки) Привет. Изучаю HTML и CSS. Делаю простые страницы. В CSS для задания размеров блоков и шрифтов используются разные единицы измерения: px, em, ex, rem, ch, проценты, vw, vh, vmin, vmax, cm, mm, pc, pt. Как наиболее эффективно применять единицы измерения? Т.е. какие единицы в каких случаях применять? 0

@Grey Тутошний я 2146 / 1201 / 225 Регистрация: 03.11.2009 Сообщений: 4,416 Записей в блоге: 2
	13.01.2018, 01:30	2
	не знаю мне 3 единиц хватает. px для блоков и шрифта фиксированных размеров, проценты для адаптивных блоков, em для адаптивного шрифта. зачем нужны остальные, смутно помню. vw, vh вроде задают размер относительно окна или блока. cm, mm вроде при выводе на печать. вообще странный вопрос. если описаны единицы измерения, должно быть написано и для чего они, где применяются. 1

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	13.01.2018, 14:57	3
	Сообщение было отмечено Ulfur97 как решение Решение Ulfur97, Сообщение от Ulfur97 Как наиболее эффективно применять единицы измерения? Т.е. какие единицы в каких случаях применять? Смотря какая задача перед Вами стоит. Можете почитать про них на этих форумах общая информация, единицы измерения для шрифтов и уже сами решайте, что и какие Вам использовать. Например: мне нужно, что бы титульная страница сайта была по высоте 100% при любой высоте монитора, при использовании свойства `height: 100%;` я не получу того эффекта, который мне нужен. А вот использовав свойство `height: 100vh;` все будет четко и красиво. Так же удобно разделять одну секцию на две одинаковые, то есть каждому блоку задать `width: 50vw;` и при любой ширине монитора ваши блоки будут занимать каждый по половине (очень удобно). Не знаю как на счет `cm, mm`, но `pc, pt, ch` давно уже не используют. 3

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	19.01.2018, 18:18	7
	Сообщение от Ulfur97 Он первоначально может оказаться не 100%? указывается в процентах для более точного управления зависимыми размерами, как правило шрифт в большинстве браузеров по умолчанию равен 16px = 100%, НО, я бы все же рекомендовал писать не в % а в px для селектора html, так как мало ли вдруг настройка браузера стоит специфическая, и по умолчанию шрифт будет равен 20px, тогда все размеры "Поплывут" в сторону гигантизма и наоборот... А с абсолютной величиной этого можно избежать. 1

@Grey Тутошний я 2146 / 1201 / 225 Регистрация: 03.11.2009 Сообщений: 4,416 Записей в блоге: 2
	20.01.2018, 00:59	9
	Сообщение от Ulfur97 Правильно ли я понимаю, что проценты почти всегда (line-height берется от текущего шрифта) берутся от значений свойств родительского контейнера? похоже, нет. это из ссылки Freeze_Breeze width/height Для width/height обычно процент от ширины/высоты родителя, но при position:fixed, процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства "height" в %. Сообщение от Ulfur97 Свойство border с процентами (применение сомнительно) не работает. да, похоже не работает. сейчас в поймал себя на мысли, что в адаптивной вёрстке никогда не использовал рамки. ответ на твой следующий вопрос https://habrahabr.ru/post/149441/ 1

Опции темы

Эффективное использование в CSS единиц измерения

Решение