Нужно делать верстку Vue JS приложения под мобильные устройства. Экранов будет 6-7.
Я обычно всю верстку для каждого компонента делаю в самом комопненте в разделе style
Но как-то сильно большое полотно получается, если делать вообще всю верстку под все разрешения. Надоело скролить.
Вот я и подумал,можно ли как-то верстку отдельно под мобильные вынести в отдельные файлы, а потом их как-то импортировать в компонент так,чтобы только компонент мог видеть свои классы из импортированных файлов?
Буду использовать синтаксис scss для sass
Можете показать пару примеров с отдельныим файлами?
Пример того,что все стили под мобильные описаны в одном компоненте vue
@media screen and (max-width: 1366px) and (max-height: 768px) {
.nav-image {
width: 50%;
}
}
@media screen and (max-width: 1200px) and (max-height: 720px) {
.instagram {
font-size: 2.5rem;
}
}
@media screen and (max-width: 900px) {
.navigation {
transform: translateX(calc(-1 * var(--nav-width)));
}
}
