Веб-дизайн с адаптивной сеткой на Pure CSS - httpdoc.ru

Адаптивный дизайн Pure.CSS

Мы изучили адаптивную природу Pure, но вопрос в том, как реализовать отзывчивость, это очень просто: мы используем предопределенные классы с разным размером сетки. Эти адаптивные модули на чистом CSS реализованы в каждом веб-проекте. Просто добавьте эти классы с небольшой персонализацией в соответствии с вашими потребностями и готово.

Примечание. Вам необходимо добавить путь CDN для адаптивной сетки отдельно вместе с путем CDN на чистом CSS, который мы обсуждали в предыдущем руководстве. Вы можете посмотреть на это в примере ниже.

Давайте посмотрим на классы. Pure использует следующие классы для создания адаптивного дизайна:

Имя класса Описание
.pure-u- * Устанавливает контейнер так, чтобы он занимал необходимое пространство на любом устройстве и на экране любого размера.
.pure-u-sm- * Устанавливает контейнер, занимающий необходимое пространство на устройстве шириной ≥ 568 пикселей.
.pure-u-md- * Устанавливает контейнер, занимающий необходимое пространство на устройстве шириной ≥ 768 пикселей.
.pure-u-lg- * Устанавливает контейнер, занимающий необходимое пространство на устройстве шириной ≥ 1024 пикселей.
.pure-u-xl- * Устанавливает контейнер, занимающий необходимое пространство на устройстве шириной ≥ 1280 пикселей.

В приведенной выше таблице вы видели asterik(*) знак в конце классов, это не что иное, как место, где вы вводите требуемую ширину сетки и количество столбцов в сетке. Например, если вы введете, '1-2' т.е. '1/2' div будет покрывать 50% общую ширину, что '1/2' означает 50%. То же самое для 25% вас будет использовать, '1-4' например, «1/4». Итак, вы должны знать дроби, чтобы использовать эти сетки. Не волнуйтесь, если вы не поняли, просто оставайтесь с нами и посмотрите на приведенный ниже пример, чтобы получить представление о том, как работают сетки.


В приведенном ниже примере адаптивная сетка создается со строкой, состоящей из четырех столбцов. Столбцы занимают все пространство на маленьких экранах, должны занимать 50% ширины на экранах среднего размера и 25% ширины на больших экранах.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> PURE.CSS  Responsive</title> 
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css">
    <style>
      .grids-example {
      background: rgb(250, 250, 250);
      margin: 10px auto;            
      font-family: Roboto, 'Liberation Mono', Courier, monospace;
      text-align: center;					
      }	
      .graybox {
      background: rgb(240, 240, 240);
      border: 1px solid #ddd;			
      }	 
    </style>
  </head>
  <body>
    <div class = "grids-example">
      <div class = "pure-g">
        <div class = "pure-u-1-1">
          <div class = "graybox">
            <p>These four columns should stack on small screens, 
              should take up width: 50% on medium-sized screens, and should 
              take up width: 25% on large screens.
            </p>
          </div>
        </div>
        <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
          <div class = "graybox">
            <p>First Column</p>
          </div>
        </div>
        <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
          <div class="graybox">
            <p>Second Column</p>
          </div>
        </div>
        <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
          <div class="graybox">
            <p>Third Column</p>
          </div>
        </div>
        <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
          <div class = "graybox">
            <p>Fourth Column</p>
          </div>
        </div>
      </div>
    </div>
    <div class = "grids-example">
      <div class = "pure-g">
        <div class = "pure-u-1">
          <div class = "graybox">
            <p>This column is to occupy the complete space of a row.</p>
          </div>
        </div>
      </div>
    </div>
    <div class = "grids-example">
      <div class = "pure-g">
        <div class = "pure-u-2-5">
          <div class = "graybox">
            <p>This column is to occupy the two-fifth of the space of a row.</p>
          </div>
        </div>
      </div>
    </div>
    <div class = "grids-example">
      <div class = "pure-g">
        <div class = "pure-u-3-5">
          <div class = "graybox">
            <p>This column is to occupy the three-fifth of the space of a row.</p>
          </div>
        </div>
      </div>
    </div>
    <div class = "grids-example">
      <div class = "pure-g">
        <div class = "pure-u-1-3">
          <div class = "graybox">
            <p>Column 1: This column is to occupy the one-third of the
              space of a row on all devices.
            </p>
          </div>
        </div>
        <div class = "pure-u-1-3">
          <div class = "graybox">
            <p>Column 2: This column is to occupy the one-third of the space 
              of a row on all devices.
            </p>
          </div>
        </div>
        <div class = "pure-u-1-3">
          <div class = "graybox">
            <p>Column 3: This column is to occupy the one-third of the space of a 
              row on all devices.
            </p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Выход

PURE.CSS Responsive

Эти четыре столбца должны складываться на маленьких экранах, должны занимать ширину: 50% на экранах среднего размера и должны занимать ширину: 25% на больших экранах.

Первая колонка

Вторая колонка

Третья колонна

Четвертая колонна

Этот столбец должен занимать все место в строке.

Этот столбец должен занимать две пятых места в строке.

Этот столбец должен занимать три пятых места в строке.

Столбец 1: этот столбец должен занимать одну треть строки на всех устройствах.

Столбец 2: этот столбец должен занимать одну треть строки на всех устройствах.

Столбец 3: этот столбец должен занимать одну треть места в строке на всех устройствах.

Класс .pure-u-1 используется для маленьких экранов шириной 100%, .pure-u-md-1-2 используется для экранов среднего размера для ширины 50% и .pure-u-lg-1-4 для больших экранов для ширины 25%. Используйте редактор пробной версии в ландшафтном режиме и измените размер окна, чтобы увидеть эффекты.

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