@salco2012

Не пойму как делать моб. адаптацию для element.io?

Мне не совсем понятно как адаптировать под мобильные устройства. Библиотека предоставляет брекпоинты :xs="8" :sm="6" :md="4" :lg="3" :xl="1"

Но, у меня на компьютере это 2 колонки, а на мобильном устройстве ествественно в 2 не влезит, нужно в 1. Как в данном случае использовать брекпоинты? Либо вообще проще будет делать все медиа-запросами?

<template>
  <div>
    <el-row class="home">
      <el-col :md="12">
        <div class="home__content">
          <el-button class="home__content-button" round
            >Сервис №1 по мнению журнала "Здоровье"</el-button
          >
          <h1 class="home__content-title">
            <span class="home__content-title_color">Забудьте</span> про диеты. <br />
            Ведь есть <br />FOOD ACCOUTING!
          </h1>

          <p class="home__content-description">
            Не знаете что приготовить? <br />На нашем сервисе вы найдете массу оригинальных
            рецептов. <br />А, так же сможете ввести детальный учет по съеденным каллориям.
          </p>
          <div class="home__content-buttons">
            <el-button
              class="home__content-btn"
              @click="$router.push({ name: 'RegistrationForm' }).catch(() => {})"
              >Регистрация</el-button
            >
            <el-button
              class="home__content-btn"
              @click="$router.push({ name: 'AuthorizationForm' }).catch(() => {})"
              >Авторизация</el-button
            >
          </div>
          <div class="home__content-statistics">
            <div class="home__content-statistics_one">
              <h2 class="home__content-statistics_title">1.000+</h2>
              <p>Пользователей</p>
            </div>
            <div class="home__content-statistics_two">
              <h2 class="home__content-statistics_title">17.000+</h2>
              <p>Рецептов</p>
            </div>
            <div class="home__content-statistics_three">
              <h2 class="home__content-statistics_title">-38.000 кг</h2>
              <p>Растопленного жира</p>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :md="12">
        <img class="home__img-girl" src="@/assets/img/main-screen-girl.png" alt="girl" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  created() {
    this.$store.commit('CLEAR_USER_UD'); // Очищаем UID
  },
};
</script>


61a62df788ed4644840797.jpeg
  • Вопрос задан
  • 79 просмотров
Пригласить эксперта
Ответы на вопрос 1
@alekcena
Нелинейный наставник
В брекпоинтах указывается:
1) Сколько столбцов занимает данный блок.
2) Из скольки столбцов состоит данный блок.
Все системы строятся на основании сеток. И дизайн систем.
В вашем случае. Можно методом тыка понять, что именно означает брекпоинт.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы