Как заставить мой сайт работать на каждом устройстве (отзывчиво)

Question

Я разработал веб-сайт и использую Boostrap 4, чтобы улучшить взаимодействие с пользователем.

Сайт в основном предназначен для использования с компьютером, но я бы хотел, чтобы его можно было использовать с планшета или мобильного телефона.

Для этого я задокументировал себя на сайте начальной загрузки и провел несколько тестов, но не могу получить желаемые результаты.

Вот как, например, выглядит форма на моем сайте (с компьютером):

Мне бы хотелось, чтобы, когда экран меньше (планшет (например, iPad) или мобильный), имя поля (например, электронная почта) указывалось в одиночной строке и принималось как класс col-sm-12 и поле, которое связан с полем имени иди по линии внизу, а также возьми col-sm-12. Поскольку экран мобильного телефона довольно мал, я бы также хотел, чтобы в каждой строке было по одному полю (а не 2, как в настоящее время) в случае, когда пользователь использует мобильный телефон или планшет.

С этого момента я делаю свои тесты с помощью Chrome Debugger, и результат отлично работает на Ipad Pro (большой планшет) или выше. Мне все еще нужно исправить это для мобильных устройств и планшетов (которые меньше, чем Ipad Pro).

В настоящее время это выглядит на мобильном телефоне с Galaxy S5:

Код

    <div class="card-body">
        <div class="row col-12">
            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12">
                <div class="form-check-inline col-12">
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4">
                        <label asp-for="Input.Email"></label>
                    </div>
                    <input asp-for="Input.Email" class="form-control" />
                </div>
                <div style="margin-left:33%">
                    <span asp-validation-for="Input.Email" class="text-danger"></span>
                </div>
                <div class="form-check-inline col-12" style="margin-top:1%">
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4">
                        <label asp-for="Input.Password"></label>
                    </div>
                    <input asp-for="Input.Password" class="form-control" />
                </div>
                <div style="margin-left:33%">
                    <span asp-validation-for="Input.Password" class="text-danger"></span>
                </div>
                <div class="form-check-inline col-12" style="margin-top:1%">
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4">
                        <label asp-for="Input.ConfirmPassword"></label>
                    </div>
                    <input asp-for="Input.ConfirmPassword" class="form-control" />
                </div>
            </div>
        </div>
    </div>

Как видите, оно далеко от совершенства.

Кроме того, он не занимает полный размер карты, поэтому он меньше, чем должен, это способ занять все пространство только на мобильном телефоне?

Не могли бы вы помочь мне получить желаемый результат?

Answer 1

Хорошо, с чего начать, большую часть времени лучше всего сначала разработать (спроектировать) для мобильных устройств, поскольку в настоящее время большинство пользователей используют мобильные устройства. Это значительно упрощает масштабирование с мобильных устройств на рабочий стол, поскольку в процессе работы у вас появляется все больше и больше места. Тем не менее, ваша текущая разметка может улучшить многое.

Например, элемент никогда не должен иметь класс row как класс column (col-12). Imo лучший способ структурировать поле с помощью классов начальной загрузки - это иметь row для каждого поля ввода и метки. Затем имейте класс col для каждого элемента, например, один для метки и один для ввода. После этого вы должны решить, какой cols вы хотели бы использовать.

Большую часть времени вы хотели бы начать с мобильного представления. Ввод и метка, вероятно, должны в вашем случае занимать 12 столбцов (потому что вы хотите иметь полную ширину). В этом случае вы должны использовать класс col-12. Поскольку вы, возможно, хотите, чтобы ввод и метка были наполовину меньше для планшетов и настольных компьютеров, вы также добавляете класс col-md-6. Это будет охватывать ввод и метку для 6 столбцов, поэтому, 2 раза 6 - это 12, поэтому они будут располагаться рядом друг с другом. Вы можете прочитать больше об этих столбцах здесь .

Чтобы проиллюстрировать это, я создал пример, который выглядит так, как вы хотите.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="row">
  <div class="col-12 col-md-6">

    <div class="row">
      <div class="col-12 col-md-6">
        <label for="name">Name</label>
      </div>
      <div class="col-12 col-md-6">
        <input type="text" id="name" />
      </div>
    </div>

    <div class="row">
      <div class="col-12 col-md-6">
        <label for="phone">Phone</label>
      </div>
      <div class="col-12 col-md-6">
        <input type="text" id="phone" />
      </div>
    </div>

  </div>

  <div class="col-12 col-md-6">
    <div class="row">
      <div class="col-12 col-md-6">
        <label for="lastname">Lastname</label>
      </div>
      <div class="col-12 col-md-6">
        <input type="text" id="lastname" />
      </div>
    </div>

    <div class="row">
      <div class="col-12 col-md-6">
        <label for="email">E-mail</label>
      </div>
      <div class="col-12 col-md-6">
        <input type="text" id="email" />
      </div>
    </div>
  </div>
</div>