个性化阅读
专注于IT技术分析

Pure.CSS响应式设计示例

Pure.CSS使用以下类创建响应式设计。

Index Class Name Description
1) .pure-u-* 它用于设置容器以占用任何设备上的所需空间(所有设备兼容)。
2) .pure-u-sm- * 它用于小屏幕。它将容器设置为在宽度为?的设备上占据所需空间。 568px。
3) .pure-u-md- * 它用于中型屏幕。它将容器设置为在宽度为?的设备上占据所需空间。 768像素。
4) .pure-u-lg- * 它用于大屏幕。它将容器设置为在宽度为?的设备上占据所需空间。 1024px。
5) .pure-u-xl-* 用于超大屏幕。它将容器设置为在宽度为?的设备上占据所需空间。 1280像素。

例子

让我们创建一个包含四列的响应式网格。列应堆叠在小屏幕上, 应占据宽度:在中型屏幕上占50%, 在宽屏幕上应占占25%。

对于小屏幕, 我们添加:.pure-u-1类

对于中型屏幕, 我们添加:.pure-u-md-1-2

对于大尺寸屏幕:.pure-u-lg-1-4

请参阅以下示例:

<html>
<head>
<title>The PURE.CSS Containers</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">

<link rel="stylesheet" 
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
crossorigin="anonymous">
      
<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 red;			
 }	
</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>

立即测试

看起来像这样:

输出

PureCSS响应式设计1
赞(0)
未经允许不得转载:srcmini » Pure.CSS响应式设计示例

评论 抢沙发

评论前必须登录!