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

Question

[salco2012]

Мне не совсем понятно как адаптировать под мобильные устройства. Библиотека предоставляет брекпоинты :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>

Answer 1

[Алексей Дубровин]

В брекпоинтах указывается:
1) Сколько столбцов занимает данный блок.
2) Из скольки столбцов состоит данный блок.
Все системы строятся на основании сеток. И дизайн систем.
В вашем случае. Можно методом тыка понять, что именно означает брекпоинт.

Comments

[salco2012]

span задает кол-во столбцов, но на десткопе у меня 2 елемента el-col и им задаю по 12 колонок, а, для мобильного нужна одна колонка, и как это сделать не понятно, не удалять же мне 2 тега el-col(

[Алексей Дубровин]

salco2012,
Я конечно не спец гуглить.
Но у них есть дока в которой показывают как делается лайаут.
https://element.eleme.io/#/en-US/component/layout
Также там есть кнопка try-it которая перекидывает в песочницу.
Исходя из логики что я описал выше, сделал это с 1 попытки в песочнице.
А в самом низу у них список атрибутов, и что они делают. Также дефолтные значения.
И сетка в дефолте 24.

[salco2012]

Да, по этой сетки весь сайт и сделал. Но, вопрос в том как для мобильной из двух колонок, сделать одну.
Ведь у них в доке, для 1 ряда такой код

<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>

для 1 ряда и 2-х колонок такой

<el-row>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

т.е уже 2 колонки.

В моем варианте так же 2 колонки для десктопа, но вот как сделать 1 колонку, ведь если я изменю на 1 el-col на десктопе так же будет 1 колонка, а нужно на десктопе 2, а на мобильном одна.

[Алексей Дубровин]

salco2012,
Я всё понимаю там в самом конце написаны атрибуты, и для каких размеров
Копирую от туда:
xs <768px Responsive columns or column props object number/object (e.g. {span: 4, offset: 4})

Атрибут, который реагирует на <768 px принимает объект, или значение.
Сетка у нас 24 колонки.
:xs="24"