Относительный CSS

Валерий Любимов, веб-студия Пугофука

Относительный CSS

Сколько их?

Абсолютные

  1. px пиксели

  2. mm миллиметры = 3.8px
  3. cm сантиметры = 38px
  4. in дюйм = 96px
  5. pt типографический пункт = 3/4 px
  6. pc типографическая пика = 16px

Относительные

  1. % относительно родительского свойства

  2. em относительно шрифта родителя
  3. rem относительно шрифта тега html
  4. ex высота строчных символов
  5. ch высота заглавых символов

  6. vw относительно ширифны окна (в процентах)
  7. vh относительно высоты окна (в процентах)
  8. vmin наименьшее из (vw, vh)
  9. vmax наибольшее из (vw, vh)

Проценты
относительно свойств родителя

			.parent {
			  font-size: 50px;
			  width: 600px;
			}
			.parent .child {
			  font-size: 200%;
			  width: 50%;
			}
		

Результат

.parent
.child

Исключения

em
относительно font-size

					.absolute-button {
					  font-size: 25px;
					  padding: 25px 50px;
					}
				
					.relative-button {
					  font-size: 1em;
					  padding: 1em 2em;
					}
				

Текст с размером 15px

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium sed doloribus, eaque nesciunt pariatur nisi voluptatibus laboriosam molestias similique. At obcaecati, odit tempore distinctio soluta nostrum quasi fugit illo quis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio iusto rem, accusantium fugit facilis saepe totam deleniti, illo necessitatibus placeat commodi! Excepturi beatae soluta in nihil commodi sunt perspiciatis.

Можно ли сделать еще лучше?

rem
относительно базового font-size документа

					html {
					  font-size: 25px;
					}
				
					.absolute-button {
					  font-size: 25px;
					  padding: 25px 50px;
					}
				
					.relative-button {
					  font-size: 1rem;
					  padding: 1em 2em;
					}
				
					@media (max-width: 750px) {
					  html {font-size: 15px;}
					}
				
					.absolute-button {
					  font-size: 25px;
					  padding: 25px 50px;
					}
				
					.relative-button {
					  font-size: 1rem;
					  padding: 1em 2em;
					}
				

Какие преимущества

vw, vh, vmin, vmax
относительно viewport

Ширина и высота viewport

vmin

vmax

vw, vh или %?

Для ширины % лучше чем vw

100vw
100%

Для высоты vh лучше чем %

Где применить?

Промо сайта

PiterCSS
Привет, всем
PiterCSS
Привет, всем

Модалка

Секция 1
Секция 2
Секция 3

А что насчет цвета?

currentColor

					color: red;
					border: 2px solid currentColor;
				
					color: green;
					border: 2px solid currentColor;
				
					color: blue;
					border: 2px solid currentColor;
				

В заключении

goo.gl/EaeUOO

Вопросы?