Как выбрать лучший модуль CSS для создания лучших макетов сайта

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

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

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

Типы единиц CSS

Единицы CSS можно разделить на следующие категории:

• Абсолютные единицы
• Относительные единицы шрифта
• Относительные единицы области просмотра

Абсолютные единицы

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

Эти единицы:

• px (пиксели)
• в дюймах)
• см (сантиметр)
• мм (миллиметр)
• ПК (пики)
• пт (очки)

Пиксели

Пиксели являются наиболее часто используемой и общепринятой единицей измерения. И это считается базой измерения для многих других единиц. Он обеспечивает наиболее стабильный результат среди различных устройств.

Элемент box в следующем примере имеет высоту 150 пикселей и ширину 150 пикселей и останется одинаковым для всех размеров экрана.

[CSS]
.коробка{
высота: 150 пикселей;
ширина: 150 пикселей;
}
[/css]

Все остальные абсолютные единицы, такие как дюймы (дюймы), см (сантиметры) и мм (миллиметры), являются реальными единицами измерения с очень небольшим количеством реальных вариантов использования CSS.

Тем не менее, хорошо понимать их отношение к пикселям, так что вот как они сравниваются:

• 1 дюйм = 96 пикселей
• 1 см = 37,8 пикселей
• 1 мм = 3,78 пикселя

В то время как pc (пики) и pt (пункты) напрямую связаны с дюймами.

• 1 дюйм = 72 балла
• 1 дюйм = 6 шт.

Связь между всеми абсолютными единицами можно продемонстрировать следующим образом:

Рем

За исключением пикселей, все другие абсолютные единицы практически не используются для экранного CSS, но, поскольку они являются реальными единицами измерения, их можно эффективно использовать в печатном CSS. (Если вас интересуют пиксели, они прекрасно работают и в печатном CSS!)

Относительные единицы шрифта

Есть некоторые единицы, которые зависят от размера шрифта или семейства шрифтов документа или его элементов родительского уровня. Сюда входят такие единицы, как:

• Эм
• бэр
• бывший
• ч

Эм

Em — относительная единица длины; это зависит от размера шрифта родительского элемента или документа. По умолчанию 1em равен 16px , если font-size не определен.

Em наследует размер от размера шрифта своего непосредственного родителя. Итак, если родительский элемент имеет font-size:18px , то 1em будет измеряться как 18px для всех его дочерних элементов.

Здесь у нас есть div .post с тремя дочерними элементами, .post-item с заголовком и текстом.

[html]
<div class="сообщение">
<div class="post-item">
<h2>Заголовок</h2>
Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов.
</div>
<div class="post-item">
<h2>Заголовок</h2>
Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов.
</div>
<div class="post-item">
<h2>Заголовок</h2>
Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов.
</div>
</div>
[/html]

Теперь родительский .post имеет font-size:20px , а дочерний элемент .post div имеет собственный font-size:1.2em с padding:0.75em и margin:0.75em , поэтому вычисленные отступы и поля будут 18 пикселей (20 пикселей). *1,2см*0,75см).

[CSS]
HTML {
размер шрифта: 20 пикселей;
}

.почта{
размер шрифта: 20 пикселей;
}

.post div{
размер шрифта: 1.2em;
}

.post-item{
фон: розовый;
набивка: 0,75 см;
поле: 0,75 em;
}

.post-item h2{
размер шрифта: 1.5em;
поле:0.5em 0;
}

.post-item p{
маржа: 0;
размер шрифта: 1em;
}
[/css]

Как видите, дочерние элементы наследуют значения от родителя.

Преимущество использования em заключается в том, что если вы решите пропорционально изменить font-size , padding и margin каждого элемента, вам просто нужно изменить размер шрифта родительского элемента, и все остальные элементы будут соответствующим образом скорректированы.

Это не относится к абсолютным единицам, таким как px, где вам нужно настраивать каждый элемент по отдельности.

Однако эта природа наследования может быть немного сложной в управлении, если вложенные элементы также имеют свой собственный font-size в em.

Как и в предыдущей демонстрации, если вы поместите заголовок и абзац в другой div в одном из дочерних элементов, вы увидите странные результаты.

[html]
<div class="post-item">
<дел>
<h2>Заголовок</h2>
Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов.
</div>
</div>
[/html]

Так как post-item имеет вложенный div , базовый размер изменится с 24px на 28,8px (20px*1,2em*1,2em), а font-size и margin для h2 изменятся на 43,2px (20px*1,2em*1,2em). *1.5em) и 14.4px (20px*1.2em*1.2em*0.5em) соответственно.

Рем

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

Если вы возьмете предыдущий пример и измените единицы измерения с em на rem для .post div , вы увидите, что все дочерние элементы исправятся.

[CSS]
.post div{
размер шрифта: 1.2rem;
}
[/css]

Как только единица изменяется с em на rem, ее базовый элемент изменяется с родительского div на корневой элемент, который имеет front-size:20px .

Таким образом, вычисление будет 20px*1.2rem*value, а h2 и p будут иметь одинаковый font-size и margin , независимо от их родителя.

Бывший

Ex относится к x-высоте текущего шрифта и используется очень редко. Измерение x-высоты непоследовательно; иногда это исходит от самого шрифта, а иногда браузер вычисляет сам.

Как и em и rem, это зависит от шрифта, но основное отличие состоит в том, что ex изменится, когда вы также измените font-family , чего нельзя сказать о двух других.

[CSS]
.коробка{
ширина: 150экс;
высота: 150экс;
}
[/css]

Ч

Ch похож на ex, но не зависит от x-высоты; скорее по ширине нулевого (0) символа. Это также меняется с font-family .

[CSS]
.коробка{
ширина:150ч;
высота:150ч;
}
[/css]

Относительные единицы области просмотра

Есть несколько единиц, которые зависят от высоты и ширины окна просмотра, например:

• vh (высота области просмотра)
• vw (ширина области просмотра)
• vmin (минимум области просмотра)
• vmax (максимум области просмотра)

Вч

Vh (высота области просмотра) измеряется как 1vh , равный 1% высоты области просмотра. Этот блок очень удобен для создания полноразмерных элементов. Vh реагирует аналогично процентам, но не зависит от высоты родительского элемента.

Вы можете использовать vh где угодно, но чаще всего vh используется для создания полноразмерных элементов. В этом примере класс full-height создаст синий контейнер, высота которого будет равна 100% высоты окна просмотра.

[CSS]
.полная высота{
высота:100вх;
фон:синий;
}
[/css]

Фольксваген

Vw (ширина области просмотра) аналогична vh, но учитывает ширину, а не высоту области просмотра. 1vw равен 1% ширины области просмотра. Эти единицы могут быть очень полезны, если вы хотите создать адаптивное окно просмотра на основе типографики.

В этом примере font-siz h1 составляет 6% от ширины области просмотра, поэтому, если ширина области просмотра составляет 1000 пикселей, размер шрифта будет 60 пикселей, а если область просмотра составляет 500 пикселей, размер шрифта будет 30 пикселей.

[CSS]
h1 {
размер шрифта: 6vw;
}
[/css]

Vмин

Vmin рассчитывается на основе минимального значения ширины или высоты области просмотра, в зависимости от того, что меньше. Скажем, у вас есть окно просмотра размером 1000 пикселей в высоту и 800 пикселей в ширину. 1vmin будет равен 8px.

Vмакс.

Vmax вычисляется прямо противоположно vmin , где считается максимальное значение области просмотра.

Как и в предыдущем примере области просмотра с высотой 1000 пикселей и шириной 800 пикселей, 1vmax будет равно 10 пикселям.

Теперь давайте рассмотрим, как можно эффективно использовать vmin и vmax . Используя наш предыдущий пример, предположим, что теперь мы хотим иметь плавные отступы и поля, основанные на размере области просмотра, а не на фиксированном значении.

В этом фрагменте кода я установил отступы на 3vmax и поля на 1.5vmin .

[CSS]
.post-item{
фон розовый;
прокладка: 3vmax;
запас: 1,5 в мин;
}
[/css]

Отступы и поля будут меняться в зависимости от размера области просмотра.

Процент (%) единицы

Единица процента (%) не принадлежит ни к какой конкретной категории, упомянутой выше, но может быть отнесена к категории относительных единиц. Это относительно его родительского элемента.

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

Процент — одна из самых полезных единиц измерения для создания адаптивного или гибкого макета. Популярные фреймворки, такие как Bootstrap, Foundation и Bulma, используют проценты для своего базового макета.

Здесь класс full-width будет иметь ширину 100% своего родительского элемента.

[CSS]
.полная ширина{
ширина: 100%;
}
[/css]

Заключение

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

Итак, какие единицы вы используете чаще всего для получения желаемого результата? Дайте нам знать в комментариях ниже!