Редактирование CSS кода

Содержание

 

Адаптивность

 

Для работы с адаптивностью стоит использовать заготовленные классы.

  • screen-lg для широких экранов
  • screen-md для ноутбуков
  • screen-sm для планшетов
  • screen-xs для телефонов

Рекомендуется стили для широких экранов использовать как основные, а для меньших экранов переопределять.

 

.demo {
  font-size: 48px;
}
.screen-md .demo {
  font-size: 36px;
}
.screen-sm .demo {
  font-size: 24px;
}
.screen-xs .demo {
  font-size: 14px;
}

 

Класс screen-* всегда должен быть в самом начале селектора.

 

Инкапсуляция стилей

 

В отличие от HTML, из CSS ничего вырезаться не будет.

Во всех компонентах кроме HTML-компонента включена инкапсуляция стилей.

Это значит, что все стили могут применяться только к текущему компоненту, и его дочерним компонентам.

Технически это сделано так. Допустим, вы написали следующий код:

 

.demo {
  font-size: 14px;
  border: 2px solid orange;
  padding: 10px;
}

 

Перед появлением на странице он будет обработан, и добавлен будет в следующем виде:

 

.css24 .demo {
  font-size: 14px;
  border: 2px solid orange;
  padding: 10px;
}

 

Где css24 — класс элемента, внутри которого расположен HTML код компонента.

ТЕХНИЧЕСКАЯ ПОДДЕРЖКА

Не можете найти то, что ищите?

Напишите нам. на связи 24/7. Среднее время ожидания ответа: 10-15 минут. Также вы можете вступить в наш Телеграм-чат, где собралось много специалистов и пользователей.

Поддержка Creatium

Агенты ответят через 10 минут

Агенты ответят

Блог, курсы и полезные материалы 

Платформа сайтов любой сложности