HTML5+CSS3基础响应式页⾯布局
随着互联⽹时代的发展，我们对⽹页布局有了新的要求，⼤⽓，美观，能够在不同的设备上呈现令⼈焕然⼀新的效果。此时，⼀个全新的概响应式布局应运⽽⽣。它的诞⽣为我们的移动端布局带来了很⼤的便利。因此学习响应式页⾯布局势在必⾏！
念—响应式布局
⼀、响应式页⾯布局的概念
响应式布局是Ethan Marcotte在2010年5⽉份提出的⼀个概念，简⽽⾔之，就是⼀个⽹站能够兼容多个终端——⽽不是为每个终端做⼀个特定的版本。这个是为解决移动互联⽹浏览器⽽诞⽣的。
⼆、响应式布局的优势
响应式可以为不同终端的⽤户提供更加舒适的界⾯和更好的⽤户体验，⽽且随着⽬前⼤屏幕的普及，⽤“⼤势所趋”来形容也不为过。随着越来越多的设计师采⽤这个技术，我们不仅看到很多的创新，还看到了⼀些成形的模式。
三、响应式布局⽹站案例（如下图所⽰）：
核⼼知识点
弹性盒模型
v 弹性盒模型
媒体查询
v 媒体查询
四、弹性盒模型
弹性盒布局模型是css3规范中提出的⼀种新的布局⽅式。
⽬的：提供⼀种更加⾼效的⽅式来对容器中的条⽬进⾏布局、对齐和分配空间
优势：这种布局模式已被主流浏览器所⽀持，可以在web应⽤开发中使⽤。
说明：
1.flex是display的⼀个属性值。
display:flex属性的元素，称为Flex容器，他⾥⾯的所有⼦元素统称为容器成员，称为Flex项⽬。后⾯我们就使⽤Flex容器和2.设置了display:flex
交叉轴（cross axis）。
主轴（main axis）和交叉轴
Flex项⽬来进⾏介绍。 Flex容器有两根坐标轴：主轴
Flex容器属性
flex-direction: row | row-reverse | column | column-reverse; flex-direction
flex-direction:row;
flex-direction:row-reverse;
flex-direction:column;
flex-direction:column-reverse;
justify-content
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-items：flex-start | flex-end | center | baseline | stretch; 定义项⽬在交叉轴上的对齐⽅式(适⽤于⽗类容器【弹性盒⼦】元素align-items
上)
align-items：flex-start;
align-items:flex-end;
align-items:center;
align-items:baseline;
align-items:stretch;
五、媒体查询
1.什么是媒体查询
@media 查询，你可以针对不同的媒体类型定义不同的样式。
使⽤ @media
响应式的页⾯，@media 是⾮常有⽤的。@media 可以针对不同的屏幕尺⼨设置不同的样式，特别是如果你需要设置设计响应式
当你重置浏览器⼤⼩的过程中，页⾯也会根据浏览器的宽度和⾼度重新渲染页⾯。
2.媒体查询的作⽤
响应式布局实现的主要⽅式
可以在不改变页⾯内容的情况下，为特定的⼀些输出设备定制显⽰效果，是响应式布局实现的主要⽅式
3.媒体查询的语法
v 外联css语法：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
媒体类型：mediatype
关键字：and|not|only
媒体特征：media feature
实例：
flex布局对齐方式
<link rel="stylesheet" media="screen and (min-width:1024px)" href="red.css" />
v 内嵌样式的语法：
@media mediatype and|not|only (media feature) { ... }
@media mediatype and|not|only
媒体类型：mediatype
关键字：and|not|only
媒体特征：media feature
@ media  screen  and  (max-width: 960px){
body
{

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。