#css #sass #less #fluid-layout
#css #sass #Меньше #fluid-макет
Вопрос:
При стилизации изменяемых макетов и изменяемых размеров текстовых веб-страниц вы должны всегда иметь в виду соответствующий размер шрифта (для единиц измерения em) и ширину содержащего блока (в процентах единиц измерения) текущих стилизованных элементов. Это потеря времени, чтобы всегда быть в курсе того, какова ширина родительского элемента, или если вы изменили размер шрифта для текущего элемента или одного из его предков.
С помощью динамических таблиц стилей (например, Sass или меньше) легко реализовать микширование или функции, которые заботятся о математическом обосновании em и вычислении процентов (простые деления), так что вы можете записать размер в пикселях и забыть о переводе, но в любом случае вы должны указать соответствующий размер шрифта и ширину блоканасколько я знаю, нет способа их автоматического определения.
Знаете ли вы, есть ли какой-либо класс утилит для автоматизации этого? Были ли предприняты какие-либо усилия для достижения этого каким-либо образом?
Комментарии:
1. Вы пытаетесь изменить размер шрифта на основе ширины контейнера?
2. Нет, я говорю о стилизации любого вертикального пространства (высота строки, заполнение сверху, заполнение снизу) в единицах em (так относительно соответствующего размера шрифта) и любого горизонтального пространства (ширина, разбиение на страницы слева, заполнение справа) в процентах (так относительно содержащего блокаширина).
Ответ №1:
Вы не можете использовать вычисленные значения свойств родительского элемента для установки свойств дочернего элемента в CSS. LESS или SASS этого не меняют. Но размеры могут быть установлены относительно их родительского элемента (или корня при использовании единиц rem).
>No, I'm talking about styling any vertical space (line-height, padding-top, padding->bottom) in em units (so relative to relevant font size)
Соответствующий размер шрифта — это установленный размер шрифта родительского элемента. Когда вы определяете размер шрифта дочернего элемента как 0,5em, его размер шрифта будет на 50% меньше размера шрифта его родительского элемента.
Вы можете использовать Less / SASS для объявления, например, 0.5em в качестве переменной. Что позволяет изменять и редактировать его в одном месте.
Меньше
@basefont: 1em;
@smallfont: 0.5em;
section {
font-size: @basefont;
article {
font-size: @smallfont; // or @basefont / 2;
}
}
footer {
font-size: @smallfont;
}
и любое горизонтальное пространство (ширина, разбиение на страницы-слева, заполнение-справа) в процентах (так относительно> ширины содержащего блока).
Процентные единицы уже относятся к родительскому (содержащему блоку).