Pure.CSS响应式设计

2018-12-24 11:55 更新

PURE.CSS有几个特殊的类来创建一个响应式设计。

S.N.类名称和描述
1.pure-u-
将容器设置为在任何设备上占用所需的空间。
2.pure-u-sm-
将容器设置为在宽度≥568像素的设备上占用所需的空间。
3.pure-u-md-
将容器设置为在宽度≥768像素的设备上占用所需的空间。
4.pure-u-lg-
设置容器占据与宽度≥1,024像素x一个设备所需的空间。
.pure-u-xl-*
设置容器占据与宽度≥1280像素的设备上占用所需的空间。

在下面的例子中,我们将创建一个带有四列的行的响应式网格。 柱子应该堆叠在小屏幕上,在中型屏幕上应占据宽度:50%,在大屏幕上应占据宽度:25%。

这是通过为小屏幕添加.pure-u-1类,为中型屏幕添加.pure-u-md-1-2,为大屏幕添加.pure-u-lg-1-4。 调整页面大小以查看网格响应屏幕大小。

purecss_responsive_design.htm

   

  <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>

结果

验证结果。

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.

First Column

Second Column

Third Column

Fourth Column

This column is to occupy the complete space of a row.

This column is to occupy the two-fifth of the space of a row.

This column is to occupy the three-fifth of the space of a row.

Column 1: This column is to occupy the one-third of the space of a row on all devices.

Column 2: This column is to occupy the one-third of the space of a row on all devices.

Column 3: This column is to occupy the one-third of the space of a row on all devices.



以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号