Материализация grid s12 не работает в мобильном представлении или в Chrome инструментах разработчика - PullRequest
Новая
       35

Материализация grid s12 не работает в мобильном представлении или в Chrome инструментах разработчика

0 голосов
/ 27 марта 2020

Я использую материализацию для создания стиля и сетки в Google Web App, над которой я работаю, но я не могу заставить грид работать на мобильных устройствах.

Я поместил код, предложенный в Materialize документация по моему разделу, а также как предложено по этому вопросу материализация сетки s12 не работает в мобильном представлении однако она не работает для меня.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Что я могу сделать не так? Мой полный HTML

1011 *

1 Ответ

1 голос
/ 28 марта 2020

Простой - вы неправильно используете разметку сетки. Если вы будете следовать рекомендациям из документации, вы увидите, что адаптивные сетки состоят из трех элементов, вложенных совершенно определенным образом:

1. Контейнер

Это самый внешний элемент, и все находится внутри него. У вас может быть один на страницу или один на раздел, в зависимости от дизайна, но очень редко вы будете иметь контейнер внутри строки или столбца. Его название говорит о том, что он делает - он содержит контент, ie, устанавливает максимальную ширину, которая может быть:

Мобильный: 90%

Планшет: 85%

Рабочий стол: 70%

2. Ряд

Ряды сидят в контейнерах. Они охватывают контейнер, имеют нижнее поле для разметки и используются для группировки столбцов.

3. Col

Cols располагаются внутри строк, и это фактический элемент, который имеет стилизацию медиазапроса для обеспечения отзывчивости:

s12 = занимает 12 столбцов (половина пространства) на всех экранах widths

s6 = занимают 6 столбцов (половина пространства) на всех экранах ширины

m6 занимают 6 колонок (половина пространства) на ширине планшета

l6 = take до 6 столбцов (половина пространства) при ширине рабочего стола

Вы можете вкладывать строки в столбцы для создания вложенных сеток, но это очень редко необходимо - вы можете использовать flexbox для пробелов внутри столбцов.

Структура очень проста, но очень специфична c: 

<div class="container">
   <div class="row">
      <div class="col">
         [content goes here]
      </div>
      <div class="col">
         [content goes here]
      </div>
   </div>
</div>

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

https://materializecss.com/grid.html

...