Проблема с чистой сеткой CSS при изменении размера экрана Chrome на мобильный - PullRequest
Новая
       42

Проблема с чистой сеткой CSS при изменении размера экрана Chrome на мобильный

0 голосов
/ 26 октября 2019

Я пытаюсь использовать чистую систему координат CSS, как описано в документации , но я не могу заставить ее работать с разрешением рабочего стола и мобильного телефона, как разрешение Pixel 2.

Вместоидущий на 2 строки как это:

enter image description here

Я получил эту проблему с межбуквенным интервалом, и div идет по той же строке:

enter image description here

Как в примере кода 

    <div class="pure-g">
            <div class="pure-u-sm-1-1 pure-u-md-1-1 pure-u-lg-9-24">
                <div class="l-box">
                  <span class="fa-stack">
                    <i class="fa fa-circle fa-stack-1And5x"></i>
                    <strong class="fa-stack-1x label-white">4</strong>
                  </span>
                    <label>Test:</label>

                </div>
            </div>
            <div class="pure-u-sm-1-1 pure-u-md-1-1 pure-u-lg-15-24">
                <div class="l-box">
                    <input class="pure-radio" id="montant" name="montant" type="text" value="">

                </div>
            </div>
          </div>

1 Ответ

1 голос
/ 26 октября 2019

Проблема с вашей сеточной системой и медиазапросами.

sm определяет поведение только для экранов с шириной не менее 568 пикселей. Ниже описана ваша проблема.

Чтобы решить эту проблему, добавьте класс pure-u-1-1 соответственно - вы можете сказать, что он определяет ваше стандартное поведение. Это само по себе не сработает, потому что вы используете другую таблицу стилей для нормализации вашего CSS. Поместите ваш нормализующий файл CSS перед другой таблицей стилей в вашем коде, в противном случае он переопределяет некоторые другие ваши правила CSS (ключевое слово каскадная таблица стилей). Всегда сначала упоминайте о нормализации CSS-файлов!

Также в этом случае класс pure-u-md-1-1 выглядит устаревшим, поскольку он не определяет другое поведение, чем pure-u-sm-1-1. Последний уже определяет одинаковое поведение для всех размеров экрана не менее 568 пикселей.

...