Учебники

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

Январь 5, 2019

Pure.CSS имеет несколько специальных классов для создания адаптивного дизайна.

Sr.No. Имя класса и описание
1

.pure-и- *

Устанавливает контейнер на необходимое место на любом устройстве.

2

.pure-у-SM- *

Устанавливает, что контейнер должен занимать необходимое пространство на устройстве с шириной ≥ 568 пикселей.

3

.pure-у-MD- *

Устанавливает, что контейнер должен занимать необходимое пространство на устройстве с шириной ≥ 768 пикселей.

4

.pure-у-LG- *

Устанавливает, что контейнер должен занимать необходимое пространство на устройстве с шириной ≥ 1024 пикселей.

5

.pure-у-XL- *

Устанавливает, что контейнер должен занимать необходимое пространство на устройстве с шириной ≥ 1280 пикселей.

.pure-и- *

Устанавливает контейнер на необходимое место на любом устройстве.

.pure-у-SM- *

Устанавливает, что контейнер должен занимать необходимое пространство на устройстве с шириной ≥ 568 пикселей.

.pure-у-MD- *

Устанавливает, что контейнер должен занимать необходимое пространство на устройстве с шириной ≥ 768 пикселей.

.pure-у-LG- *

Устанавливает, что контейнер должен занимать необходимое пространство на устройстве с шириной ≥ 1024 пикселей.

.pure-у-XL- *

Устанавливает, что контейнер должен занимать необходимое пространство на устройстве с шириной ≥ 1280 пикселей.

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

Это делается путем добавления класса .pure-u-1 для небольших экранов, .pure-u-md-1-2 для экранов среднего размера и .pure-u-lg-1-4 для больших экранов. Измените размер страницы, чтобы увидеть отклик сетки на размер экрана.

пример

purecss_responsive_design.htm

Live Demo

<html>
   <head>
      <title>The PURE.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">

      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;            
            font-family: Consolas, '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>

Результат

Проверьте результат.

52
Share: