Учебники

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

Ноябрь 23, 2018

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

Старший Имя класса и описание
1

w3 половина

Устанавливает контейнер на половину окна на устройствах среднего или большого экрана. Если размер экрана меньше 601 пикселя, размер контейнера увеличивается до 100%.

2

и3-третьих

Устанавливает контейнер на 1/3 окна на устройствах среднего или большого экрана. Если размер экрана меньше 601 пикселя, размер контейнера увеличивается до 100%.

3

w3 четверть

Устанавливает, что контейнер занимает 1/4 окна на устройствах среднего или большого экрана. Если размер экрана меньше 601 пикселя, размер контейнера увеличивается до 100%.

4

w3-цв

Определяет столбец в сетке из 12 столбцов.

5

и3-строка

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

w3 половина

Устанавливает контейнер на половину окна на устройствах среднего или большого экрана. Если размер экрана меньше 601 пикселя, размер контейнера увеличивается до 100%.

и3-третьих

Устанавливает контейнер на 1/3 окна на устройствах среднего или большого экрана. Если размер экрана меньше 601 пикселя, размер контейнера увеличивается до 100%.

w3 четверть

Устанавливает, что контейнер занимает 1/4 окна на устройствах среднего или большого экрана. Если размер экрана меньше 601 пикселя, размер контейнера увеличивается до 100%.

w3-цв

Определяет столбец в сетке из 12 столбцов.

и3-строка

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

пример

w3css_responsive_design.htm

Live Demo

<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h2>Mobile First Design Demo</h2>
         <p class = "w3-large">Resize the window to see the effect!</p>
      </header>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-half w3-red">
            <h2>w3-half</h2>
            <p>Sets the container to occupy 1/2<sup>nd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>
         
         <div class = "w3-container w3-half">
            <h2>w3-half</h2>
         </div>
      </div>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-third w3-red">
            <h2>w3-third</h2>
            <p>Sets the container to occupy 1/3<sup>rd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>
         
         <div class = "w3-container w3-third">
            <h2>w3-third</h2>
         </div>
      </div>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-quarter w3-red">
            <h2>w3-quarter</h2>
            <p>Sets the container to occupy 1/4<sup>th</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>

         <div class = "w3-container w3-quarter">
            <h2>w3-quarter</h2>
         </div>
      </div>
   </body>
</html>

Результат

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

51
Share: