当前位置: 首页 > 工具软件 > Pure.css > 使用案例 >

响应式布局框架 Pure-CSS 5.0 示例中文版-上

潘安平
2023-12-01

0. Pure-CSS 介绍

Pure CSS 是雅虎出品的 CSS 框架,

依托于Normalize.CSS,在不适用任何JS代码情况下即可实现响应式布局的轻量级框架,无依赖,体积小。

 

1. CDN

<linkrel="stylesheet"href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">

 

2. 设置 Viewport

 

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

 

3. 完整 HTML5 模板

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>页面标题</title>

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">

</head>

 

<body>

    <!--

    网页内容

    -->

</body>

</html>

 

4. 隐藏元素

在元素中加入hidden 属性,效果相当于 display: none !important;

<input type="text" name="_csrf" hidden>

 

5. 图片适应视窗大小

在 IMG 标签中加入类 .pure-img

<img class="pure-img" src="...">

 

6. 网格 Grids

网格对象中包含两种样式类:网格类(pure-g)和单元格类(pure-u 或者 pure-u-*)

单元格的大小由类命指定, 如:pure-u-1-2 表示 50% 宽度, pure-u-1-5 表示 20% 宽度

示例:

<div class="pure-g">

    <div class="pure-u-1-3"><p>Thirds</p></div>

    <div class="pure-u-1-3"><p>Thirds</p></div>

    <div class="pure-u-1-3"><p>Thirds</p></div>

</div>

 

7. 响应式网格 Responsive Grids

PureCSS默认没有添加响应式网格框架,需要时请手动添加一下内容到 head 标签中

<!--[if lte IE 8]>

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">

<![endif]-->

<!--[if gt IE 8]><!-->

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">

<!--<![endif]-->

 

对比普通网格与响应式网格

普通:

<div class="pure-g">

    <div class="pure-u-1-3"> ... </div>

    <div class="pure-u-1-3"> ... </div>

    <div class="pure-u-1-3"> ... </div>

</div>

 

响应式

<div class="pure-g">

    <div class="pure-u-1pure-u-md-1-3"> ... </div>

    <div class="pure-u-1 pure-u-md-1-3"> ... </div>

    <div class="pure-u-1 pure-u-md-1-3"> ... </div>

</div>

 

在大屏幕里,普通 与 响应式 的单元格宽度均是 33.3%,但在小屏幕中 响应式 的单元格宽度将变为 100%

默认的媒体大小定义

 

Key

CSS Media Query

Applies

Classname

 

None    None    Always    .pure-u-*    

sm    @media screen and (min-width: 35.5em)    ≥568px    .pure-u-sm-*    

md    @media screen and (min-width: 48em)    ≥768px    .pure-u-md-*    

lg    @media screen and (min-width: 64em)    ≥1024px    .pure-u-lg-*    

xl    @media screen and (min-width: 80em)    ≥1280px    .pure-u-xl-*    

注:默认情况下 1em = 16px

 

在表格中应用边框与间距

<style>

    .pure-g > div {

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

        box-sizing: border-box;

    }

    .l-box {

        padding: 1em;

    }

</style>

<div class="pure-g">

    <div class="pure-u-1-2 l-box"> ... </div>

    <div class="pure-u-1-2 l-box"> ... </div>

</div>

 

注:使用 box-sizing 可以防止边框占用像素,扰乱布局

 


了更好的兼容性,网格默认对 <html>, <button>, <input>, 
<select>, 和 <textarea> 使用了 font-family: sans-serif; 
如需要修改,可添加如下样式:

<style>

html, button, input, select, textarea,

.pure-g [class *= "pure-u"] {

    /* 自定义字体 */

    font-family: Georgia, Times, "Times New Roman", serif;

}

</style>

 类似资料: