HTML5+CSS3基础响应式页面布局

1、html5+css3基础响应式页面布局随着互联网时代的进展，我们对网页布局有了新的要求，大气，美观，能够在不同的设备上展现令人面貌一新的效果。此时，一个全新的概念—响应式布局应运而生。它的出生为我们的移动端布局带来了很大的方便。因此学习响应式页面布局势在必行！一、响应式页面布局的概念响应式布局是ethan marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网扫瞄器而出生的。二、响应式布局的优势响应式布局可以为不同终端的用户提供越发舒服的

2、界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采纳这个技术，我们不仅看到无数的创新，还看到了一些成形的模式。三、响应式布局网站案例（如下图所示）：核心学问点v 弹性盒模型v 媒体查询四、弹性盒模型弹性盒布局模型是css3规范中提出的一种新的布局方式。目的：提供一种越发高效的方式来对容器中的条目举行布局、对齐和分配空间优势：这种布局模式已被主流扫瞄器所支持，可以在web应用开发中用法。解释：1.flex是display的一个属性值。2.设置了display:flex属性的元素，称为flex容器，他里面的全部子元素统称为容器成员，称为flex

3、项目。后面我们就用法flex容器和 flex项目来举行介绍。 flex容器有两根坐标轴：主轴（main axis）和交错轴（cross axis）。flex容器属性flex-direction: row | 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 |

4、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-items：flex-start | flex-end | center | baseline | stretch; 定义项目在交错轴上的对齐方式(适用于父类容器【弹性盒子】元素上)align-items：flex-start;ali

5、gn-items:flex-end;align-items:center;align-items:baseline;align-items:stretch;五、媒体查询1.什么是媒体查询用法 media 查询，你可以针对不同的媒体类型定义不同的样式。media 可以针对不同的屏幕尺寸设置不同的样式，特殊是假如你需要设置设计响应式的页面，media 是十分实用的。当你重置扫瞄器大小的过程中，页面也会按照扫瞄器的宽度和高度重新渲染页面。2.媒体查询的作用可以在不转变页面内容的状况下，为特定的一些输出设备定制显示效果，是响应式布局实现的主要方式3.媒体查询的语法v 外联css语法：媒体类型：medi

6、atype关键字：and|not|only媒体特征：media feature实例：v 内嵌样式的语法：media mediatype and|not|only (media feature) . 媒体类型：mediatype关键字：and|not|only媒体特征：media feature media screen and (max-width: 960px)body media screen and (max-(min-width:960px) and (max-width:1200px)bodybackground:yellow;四、课堂案例下面是一个响应式布局的容易案例导航部分：1） 导航部分由logo，导航和登录三部分组成，这三部分放置在一个header的父容器中，给header设置display：flex；使之成为弹性盒模型，并设置主轴方向为row，子元素在父容器中的对齐方式为两端对齐。2） 当窗口小于等于640px时，将导航躲藏，添加媒体查询列表部分1） 全部的都放置在一个class名为picture的父容器中，给父容器添加display:flex；使之成为弹性盒模型，并设置子元素的对齐方式为居中对齐（justify-content:center;）,并设置每一个子元素占领父