"Вкусные" мелочи CSS

Итак.

1.Относительные единицы измерения

Сейчас, установв базовый размер шрифта для документа, можно использовать относительные единицы, чтобы установить размер шрифта для всех остальных элементов на странице. В CSS это выглядит примерно так:
html { font-size: 10px; }p { font-size: 1.4em; }

Всё хорошо пока у вас не появляется дочерний элемент, которому вы хотите установить какой-нибудь другой размер шрифта. Например, в такой разметке:
текст и текст2 <span>текст3</span>.
И вам нужен текст3 размера 1.5em.Что будите делать? Считать. Тоже самое и с процентами в width и height.  которые нужно применить к родительским элементам. Например вам нужно 30% от 75%. Снова нужно считать. Но теперь есть новая еденица измерения rem,(все современные браузеры) которая относится не к родителю, а к корню. Что намного удобней.

Так же для процентов введенны велечины vh и vw,( IE9+, Chrome и Safari 6) которые соотносятся не с корнем, а с вьюпортом.
#div { height: 50vh; }

Здесь высота элемента равно половине высоты вьюпорта.Те,если изменяется размер окна просмотра , то и изменяется значение соответствующих единиц.

399 просмотров
Теги: css
Вход через социальные сети