Pure.CSS-반응 형 디자인
Pure.CSS에는 반응 형 디자인을 만드는 몇 가지 특수 클래스가 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | .pure-u-* 모든 장치에서 필요한 공간을 차지하도록 컨테이너를 설정합니다. |
| 2 | .pure-u-sm-* 너비가 568px 이상인 기기에서 필요한 공간을 차지하도록 컨테이너를 설정합니다. |
| 삼 | .pure-u-md-* 너비가 768px 이상인 기기에서 필요한 공간을 차지하도록 컨테이너를 설정합니다. |
| 4 | .pure-u-lg-* 너비가 1024px 이상인 기기에서 필요한 공간을 차지하도록 컨테이너를 설정합니다. |
| 5 | .pure-u-xl-* 너비가 1280px 이상인 기기에서 필요한 공간을 차지하도록 컨테이너를 설정합니다. |
다음 예제에서는 4 개의 열이있는 행이있는 반응 형 그리드를 만들 것입니다. 열은 작은 화면에 쌓여 야하며 너비를 차지해야합니다. 중간 크기 화면에서는 50 %, 큰 화면에서는 25 %를 차지해야합니다.
이것은 추가하여 수행됩니다 .pure-u-1 작은 화면을위한 수업, .pure-u-md-1-2 중간 크기 화면 .pure-u-lg-1-4큰 화면을 위해. 화면 크기에 대한 격자 응답을 보려면 페이지 크기를 조정하십시오.
예
purecss_responsive_design.htm
<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>결과
결과를 확인하십시오.