5.7 响应式web设计
1、基础概念
响应式Web设计中有几个非常重要的概念必须掌握，它们也是响应式设计的关键技术。
（1）视口
视口在响应式设计中是一个非常重要的概念。视口这一概念是针对移动端浏览器的，分为两种视口，一种是可见视口即设备大小，另一种是视窗视口即网页宽度。
比如，设备屏幕是414像素的宽度，在浏览器中，414像素的屏幕宽度能够展示1200像素宽度的内容。那么414像素就是可见视口的宽度，而1200像素就是视窗视口的宽度。
HTML5中，<meta>标签可以用于配置视口属性。
<meta name="viewport" content="user-scalable=no, width=device-width,initial-scale=1.0,maximum-scale=1.0">
其中，user-scalable用于设置用户是否可以缩放，默认为yes。
width=device-width，用于设置视窗视口的宽度，这里表示与可见视口宽度相同。
initial-scale=1.0，用于设置初始缩放比例，取值为0~10.0。
maximum-scale=1.0，用于设置最大缩放比例，取值为0~10.0。
除此之外，还可以用height属性设置视窗视口的高度，minimum-scale设置最小缩放比例。
（2）媒体查询
在CSS3规范中，媒体查询可以根据视口宽度、设备方向等差异来改变页面的显示方式。能够在相同的样式表中，使用不同的样式规则来针对不同的媒介。媒体查询由媒体类型和条件表达式组成，语法如下：
@media screen and (max-width: 960px) {
/*样式设置*/
}
它表示媒体类型为screen并且屏幕宽度小于等于960px时的样式。内容可以被显示在显示器、纸媒介或者听觉浏览器等媒体类型上。
媒体查询案例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width,initial-scale=1.0, maximum-scale=1.0">
<title>媒体查询</title>
<style type="text/css">
body {
background-color: red;
}
@media (min-width: 320px){
body {
background-color: blue;
}
}
@media (min-width: 414px){
body {
background-color: yellow;
}
}
@media (min-width: 768px){
body {
background-color: grey;
}
}
@media (min-width: 960px){
body {
background-color: pink;
}
}
</style>
</head>
<body>
</body>
</html>
2、响应式设计
在了解了HTML5为响应式Web设计提供的技术手段后，我们再来学习如何使页面内容也能随页面视口的变化而改变的方式。最常见的响应式Web设计方式有3种，即百分比布局、栅格系统和弹性盒布局。
（1）百分比布局
由于媒体查询只能针对某几个特定阶段的视口，在捕捉到下一个视口前，页面的布局是不会变化的，这样会影响页面的显示，同时也无法兼容日益增多的各种设备。所以，想要做出真正灵活的页面，还需要用百分比布局代替固定布局，并且使用媒体查询限制范围。
其实，固定布局（以像素为单位）可以换算为百分比宽度，来实现百分比布局。
换算公式为：目标元素宽度/父盒子宽度=百分数宽度
比如，当父盒子的宽度为600px时，
aside{width:300px;} → aside{width:50%;}
百分比布局的案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>固定布局转换为百分比布局</title>
<style type="text/css">
body>*{
width:980px; height:auto; margin:0 auto; margin-top:10px;
border:1px solid #000; padding:5px;}
header{ height:50px;}
section{ height:300px;}
footer{ height:30px;}
section>*{ height:100%; border:1px solid #000; float:left;}
aside{ width:250px;}
article{ width:700px; margin-left:10px;}
</style>
</head>
<body>
<header>头</header>
<nav>导航</nav>
<section>
<aside>侧边栏</aside>
<article>文章</article>
</section>
<footer>页脚</footer>
</body>
</html>
（2）栅格系统
在网页制作中，栅格系统（又称网格系统）就是用固定的格子进行网页布局，是一种清晰、工整的设计风格。
栅格系统最早是应用于印刷媒体上，后来被应用于网页布局中，而随着响应式设计的流行，栅格系统开始被赋予了新的意义。
使用栅格系统进行布局可以让网页布局适应不同设备,如下图所示。
栅格系统布局案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width,initial-scale=1.0, maximum-scale=1.0">
<title>栅格系统布局</title>
</head>
<style type="text/css">
.row{
width: 100%;
}
/*伪元素:after的一个很重要的用法--清除浮动*/
.row :after{
clear: left;/*清除左浮动*/
content: '';
display: table;/*该元素会作为块级表格来显示*/
}
/*CSS3新增[attribute^=value] 选择器，用于匹配属性值以指定值开头的每个元素。*/
[class^="col"]{
float: left;
background-color: #e0e0e0;
}
.col1{
width: 25%;
}
.col2{
width: 50%;
}
@media (max-width: 768px) {
.row{
width: 100%;
}
[class^="col"]{
float: none;
width:100%;
}
}
</style>
<body>
<div class="row">
<header>页头</header>
</div>
<div class="row">
<nav class="col1">导航</nav>
<div class="col2">主要内容</div>
<aside class="col1">侧边栏</aside>
</div>
<div class="row">
<footer>页尾</footer>
</div>
</body>
</html>
（3）弹性盒布局
说到响应式，就不得不提CSS3中的弹性盒布局了，它可以轻松的创建响应式网页布局，为盒状模型增加灵活性。
弹性盒由容器、子元素和轴组成，如下图所示。
弹性盒改进了块模型，既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距，是一种非常灵活的布局方法。
display是一个关键属性，用于指定弹性盒的容器，其值可以为flex；如果为行内元素，值为inline-flex。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒属性</title>
</head>
<style type="text/css">
.box {
min-height: 200px;
display: flex;/*指定弹性盒的容器*/
/*
flex-direction: row|row-reverse|column|column-reverse;
flex-wrap: nowrap|wrap|wrap-reverse;
*/
flex-flow: row-reverse;/*弹性子元素按横轴方向顺序排列*/
justify-content: center;/*弹性子元素向行中间位置对齐*/
align-items: flex-end;/*弹性子元素向垂直于轴的方向上的中间位置对齐*/
background-color: gray;
}
.A,.B,.C {
background-color: white;
border:1px solid gray;
}
.box div.A {
order: 1;/*order设置该子元素出现的顺序*/
flex-grow: 0;/*扩展比率*/
flex-shrink: 1;/*收缩比率*/
flex-basis: auto;/*宽度，像素值*/
align-self: center;/*该子元素在该行的纵轴上居中放置。*/
}
.box div.B {
order: 2;
flex: 0 1 auto;/*扩展比0、收缩比1和宽度居中的缩写形式*/
align-self: stretch;
}
.box div.C {
order: 3;
flex: 0 1 auto;
align-self: center;
}
</style>
<body>
<div class="box">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
</div>
</body>
</html>
flex-flow是属性flex-direction 和flex-wrap 的简写，用于排列弹性子元素。
flex-direction的取值如下表所示：
| 取值 | 描述 |
| row | 弹性盒子元素按横轴方向顺序排列（从左往右），默认值。 |
| row-reverse | 弹性盒子元素按横轴方向逆序排列。 |
| column | 弹性盒子元素按纵轴方向顺序排列（自顶向下）。 |
| column-reverse | 弹性盒子元素按纵轴方向逆序排列。 |
flex-wrap的取值如下表所示：
| 取值 | 描述 |
| nowrap | flex容器为单行，该情况下flex子项可能会溢出容器。 |
| wrap | flex容器为多行，flex子项溢出的部分会被放置到新行。 |
| wrap-reverse | 反转 wrap 排列。 |
justify-content属性设置子元素如何在当前轴（横轴）方向的对齐方式，其取值如下表所示。
| 取值 | 描述 |
| flex-start | 弹性盒子元素将向行起始位置对齐。 |
| flex-end | 弹性盒子元素将向行结束位置对齐。 |
| center | 弹性盒子元素将向行中间位置对齐。 |
| space-between | 两端对齐，弹性盒子元素间空间相等。 |
| space-around | 两端对齐，弹性盒子元素四周空间相等。 |
align-items属性用于设置子元素在垂直于轴（纵轴）的方向上的对齐，其取值如下表所示。
| 取值 | 描述 |
| flex-start | 弹性盒子元素向垂直于轴的方向上的起始位置对齐（顶对齐）。 |
| flex-end | 弹性盒子元素向垂直于轴的方向上的结束位置对齐（底对齐）。 |
| center | 弹性盒子元素向垂直于轴的方向上的中间位置对齐（垂直居中对齐）。 |
| baseline | 弹性盒子元素的第一行文字的基线对齐。 |
| stretch | 如果弹性盒子元素未设置高度或设为auto，将占满整个容器的高度。 |
order属性用于设置子元素出现的顺序。
flex属性是flex-grow（扩展比率），flex-shrink（收缩比率）和flex-basis（宽度，像素值）的缩写，能够设置子元素的伸缩性。
align-self属性能够覆盖容器中的align-items属性，用于设置单独的子元素如何沿着纵轴排列。
其取值有auto|flex-start|flex-end|center|baseline|stretch，每个值的意义与align-items属性的取值类似。
在使用弹性盒布局时，以下属性不起作用：
①弹性容器的每一个子元素变为一个弹性子元素，弹性容器直接包含的文本变为匿名的弹性子元素。
②第2单元中，多列布局中的column-*属性对弹性子元素无效。
③第1单元中，float和clear 对弹性子元素无效。使用float 会导致display 属性计算为block。
④vertical-align属性对弹性子元素的对齐无效。
弹性盒布局案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>弹性盒布局</title>
<style>
body {
font: 24px Helvetica;
background: #fff;
}
.main {
min-height: 500px;
margin: 0px;
padding: 0px;
display: flex;/*设置该div为一个弹性盒容器*/
flex-flow: row;/*子元素按横轴方向顺序排列*/
}
.main > article {
margin: 4px;
padding: 5px;
border-radius:7pt;/*pt也是文字大小的单位，1pt=1px*3/4 */
background: #719DCA;
flex:3;/*数字也可达到分配宽度的效果，将容器分为5份，占3份*/
order:2;/*排序为第2个子元素*/
}
.main > nav {
margin: 4px;
padding: 5px;
border-radius: 7pt;
background: #FFBA41;
flex: 1 ;/*将容器分为5份，占1份*/
order: 1;/*排序为第1个子元素*/
}
.main > aside {
margin: 4px;
padding: 5px;
border-radius: 7pt;
background: #FFBA41;
flex: 1 ;/*将容器分为5份，占1份*/
order: 3;/*排序为第3个子元素*/
}
header, footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 2px solid #FFBA41;
border-radius: 7pt;
background: #FFF;
}
@media all and (max-width: 640px) {/*当屏幕小于640px时*/
.main {
flex-flow: column; /*弹性盒中的子元素按纵轴方向排列*/
}
.main > article, .main > nav, .main > aside {
order:0; /*将子元素都设置成同一个值，指按自然顺序排列*/
}
.main > nav, .main > aside, header, footer {
min-height: 50px;
max-height: 50px;
}
}
</style>
</head>
<body>
<header>header</header>
<div class="main">
<article>article</article>
<nav>nav</nav>
<aside>aside</aside>
</div>
<footer>footer</footer>
</body>
</html>
433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
