LESS-теги медиасурөөттөр
Элементке медиасурөөт кошочу функцияны жасайлы. Мисал үчүн бул мобилдик түзмөктөр үчүн стилдерди жөнгө салчу сурөөт болсун. Биздин функциябызды атташтыралы:
styles.less.mobile(@code) {
}
Биздин функция параметр катары код блогун кабыл алат. Келгиле, бул блогту медиасурөөт ичинде чыгаралы:
styles.less.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
Эми биздин функцияны колдонолу:
styles.lessdiv {
.mobile({
width: 300px;
});
}
Натыйжада, компиляциядан кийин биздин див медиасурөөт ичине кирип, тиешелүү стилдерди алат:
styles.less@media (max-width: 600px) {
div {
width: 300px;
}
}
Задание 1
Планшеттер үчүн стилдерди белгилөөчү
tablet функциясын жасаңыз.
Задание 2
Мобилдик телефондор жана планшеттер үчүн стилдерди белгилөөчү
gadget функциясын жасаңыз.
Задание 3
Ноутбуктар үчүн стилдерди белгилөөчү
notebook функциясын жасаңыз.
Задание 4
Десктоптор үчүн стилдерди белгилөөчү
desktop функциясын жасаңыз.