HTML5入门教程：响应式页面布局

HTML5⼊门教程：响应式页⾯布局
摘⾃：
随着互联⽹时代的发展，我们对⽹页布局有了新的要求，⼤⽓，美观，能够在不同的设备上呈现令⼈焕然⼀新的效果。

此时，⼀个全新的概念——响应式布局应运⽽⽣！它的诞⽣为我们的移动端布局带来了很⼤的便利，因此学习响应式页⾯布局势在必⾏！
01
响应式页⾯布局的概念
响应式布局是Ethan Marcotte在2010年5⽉份提出的⼀个概念，简⽽⾔之，就是⼀个⽹站能够兼容多个终端——⽽不是为每个终端做⼀个特定的版本。

这个概念是为解决移动互联⽹浏览器⽽诞⽣的。

02
响应式布局的优势
响应式布局可以为不同终端的⽤户提供更加舒适的界⾯和更好的⽤户体验，⽽且随着⽬前⼤屏幕移动设备的普及，⽤“⼤势所趋”来形容也不为过。

随着越来越多的设计师采⽤这个技术，我们不仅看到很多的创新，还看到了⼀些成形的模式。

03
响应式布局⽹站案例
（如下图所⽰）：
04
弹性盒模型
弹性盒布局模型是css3规范中提出的⼀种新的布局⽅式。

⽬的：提供⼀种更加⾼效的⽅式来对容器中的条⽬进⾏布局、对齐和分配空间。

优势：这种布局模式已被主流浏览器所⽀持，可以在web应⽤开发中使⽤。

说明：
1.flex是display的⼀个属性值。

2.设置了display:flex属性的元素，称为Flex容器，他⾥⾯的所有⼦元素统称为容器成员，称为Flex项⽬。

后⾯我们就使⽤Flex容器和 Flex项⽬来进⾏介绍。

Flex容器有两根坐标轴：主轴（main axis）和交叉轴（cross axis）。

Flex容器属性
flex-directionrow | row-reverse | column | column-reverse;
flex-direction:row;
flex-direction:row-reverse;
flex-direction:column;
flex-direction:column-reverse;
justify-content定义了Flex项⽬在主轴⽅向上的对齐⽅式flex-start | flex-end | center | space-between | space-around;
justify-content:flex-start;
justify-content：flex-end;
justify-content：flex-center;
justify-content：space-between;
justify-content：space-around;
align-itemsflex-start | flex-end | center | baseline | stretch;
定义项⽬在交叉轴上的对齐⽅式(适⽤于⽗类容器【弹性盒⼦】元素上)
align-items：flex-start;
align-items:flex-end;
align-items:center;
align-items:baseline;
align-items:stretch;
05
媒体查询
1.什么是媒体查询
使⽤@media查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺⼨设置不同的样式，特别是如果你需要设置设计响应式的页⾯，@media 是⾮常有⽤的。

当你重置浏览器⼤⼩的过程中，页⾯也会根据浏览器的宽度和⾼度重新渲染页⾯。

2.媒体查询的作⽤
可以在不改变页⾯内容的情况下，为特定的⼀些输出设备定制显⽰效果，是响应式布局实现的主要⽅式。

3.媒体查询的语法
✦外联css语法：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
媒体类型：mediatype
关键字：and|not|only
媒体特征：media feature
实例：
<link rel="stylesheet" media="screen and (min-width:1024px)" href="red.css" />
✦内嵌样式的语法：
@media mediatype and|not|only (media feature) { ... }
媒体类型：mediatype
关键字：and|not|only
媒体特征：media feature
@media screen and (max-width: 960px){
body{
background: #000;
@media screen and (min-width:960px) and (max-width:1200px){
body{
background:yellow;
}
4.课堂案例
下⾯是⼀个响应式布局的简单案例
▷▷导航部分：
1）导航部分由logo，导航和登录三部分组成，这三部分放置在⼀个header的⽗容器中，给header设置display：flex；使之成为弹性盒模
型，并设置主轴⽅向为row，⼦元素在⽗容器中的对齐⽅式为两端对齐。

2）当窗⼝⼩于等于640px时，将导航隐藏，添加媒体查询
▷▷图⽚列表部分:
1）所有的图⽚都放置在⼀个class名为picture的⽗容器中，给⽗容器添加display:flex；使之成为弹性盒模型，并设置⼦元素的对齐⽅式为居中对齐（justify-content:center;）,并设置每⼀个⼦元素占据⽗元素的25%，溢出换⾏显⽰。

2）添加媒体查询，当窗⼝⼩于640px时，每⾏放置两张图⽚，即每个⼦元素占据50%；
综上所述，掌握了弹性盒模型和媒体查询，我们就可以很轻松的做出⼀个响应式的⽹站。