Web全栈开发案例教程课件 第2章3 响应式布局

2.3响应式布局问题起源上网设备屏幕之间的差距变得前所未有的大，如何让网页自适应不同大小的屏幕？EthanMarcotte于2010年提出了“响应式网页设计”(ResponsiveWebdesign)的理念。响应式网页：网页的布局效果会“变”响应式网页与传统网页在手机上显示效果响应式网页设计所谓响应式网页设计，就是网页内容会随着访问它的视口或设备的不同而呈现不同的布局样式。关键技术：媒体查询（mediaqueries）流式布局（Fluidlayout）自适应图片2.3.1媒体查询@media(min-width:480px){ /*屏幕宽度≥480px时*/ h1{ height:160px;text-align:center; background:url(images/mkslou.jpg)no-repeattopcenter; }}语法：@medianot|onlymediatypeand(expressions){ CSS代码...; }

注意媒体查询语句的书写顺序：由于浏览器是从上到下逐条解释代码的。因此小于等于800px(max-width:800px)的媒体查询语句必须写在小于等于480px(max-width:480px)的语句之前。2.3.2流式布局流式布局使用百分比宽度来设置布局元素的宽度，这样可以根据客户端屏幕的分辨率来进行合理的显示。流式布局通常要与媒体查询结合起来使用，才能实现响应式布局。

注意流式布局与浮动的区别固定宽度的浮动元素虽然也可以在容器空间不足的情况下自动转到下一行排列，但无法在水平方向撑满外围容器。因此，单纯使用浮动，无法实现流式布局效果。box-sizing属性在流式布局中的应用默认情况下元素的宽度是width+padding+border，而border的宽度不能设置为百分比，假如设置元素的border为2像素，width为30%，则元素占据的宽度为：30%+2px，这样的宽度将变得不好估计CSS3提供了box-sizing属性，其语法如下：

box-sizing：content-box|border-box值为content-box（默认值）时，元素的实际宽度等于width+padding+border。值为border-box时，元素的实际宽度就等于width。因此可将box-sizing属性值设置为border-box注意无论box-sizing属性值如何，子元素占据的总是元素内容的宽度。假设父元素的宽度是30%（实际占据的宽度假设为300px），子元素的宽度是100%，如果父元素没有设置border和padding，则子元素实际宽度为300px，如果父元素设置了10像素的边框，则子元素实际占据的宽度将自动调整为280px2.3.3自适应图片1.img元素图片的自适应#topimg{max-width:100%; /*设置最大宽度为100%*/ height:auto;}

2.3.3自适应图片2.背景图片的自适应技术#banner{width:100%;/*宽度要设为百分比*/background:url(img/2.jpg)no-repeatcentercenter; /*图片以中心位置定位*/background-size:cover; /*这条是关键*/min-height:200px; }

2.3.4flex布局2.3.4弹性盒布局CSS3新增了弹性盒布局方式display:flex

flex布局能更容易地创建可变宽度布局，在响应式布局，微信小程序页面布局中已成为主流。子元素1子元素2子元素3主轴（默认是横轴）侧轴容器弹性容器中的每一个直接子元素都会变成弹性子元素，弹性容器中直接包含的无标签环绕的文本也会变为匿名弹性子元素；float和clear属性对弹性子元素无效，vertical-align属性对弹性子元素对齐无效；1.开启弹性盒布局CSS3新增了弹性盒布局方式display:flex

.flex{

display:flex; /*开启弹性盒布局*/

flex-flow:row;/*弹性盒内的元素横轴方向排列*/ background-color:#ffff99; border:1pxsolid#111; }flex-flow属性flex-flow属性是flex-direction和flex-wrap的简写flex-direction用于调整主轴的方向，默认情况下为横向（row）。在响应式布局中，通常利用媒体查询设置在宽屏下各列（子元素）横向排列，在窄屏下各列纵向排列。flex-wrap属性用于让弹性子元素在必要的时候换行，默认值为nowrap（不换行）flex-flow:rownowrap; /*等价于：以下分开写*/flex-direction:row;flex-wrap:nowrap;2.设置子元素的对齐方式.flex{ justify-content:center; align-items:center;} /*盒子内元素向垂直于轴的方向上的中间位置对齐*/justify-content：设置弹性盒内的子元素在主轴（默认是横轴）上的对齐方式，其取值有：flex-start|flex-end|center|space-between|space-around。其中space-between能实现子元素两端对齐，在制作栏目框时常用。设置子元素的排列顺序和占据的比例.son1{flex:1;order:3} /*占据1/5的宽度，排序3*/.son2{flex:3;order:2}.son3{flex:1;order:1}flex属性还能设置子元素的伸缩性，它是flex-grow（放大比率，默认为0）、flex-shrink（缩小比率，默认为1）和flex-basis（以像素值设置的固定宽度）的简写，后两个为可选属性。在这些属性中，最常用的是flex-grow。4.一列固定一列变宽的弹性盒实现.flex{ display:flex; flex-flow:row; }.son1{width:80px;} /*固定宽度*/.son2{flex-grow:1}/*占据固定宽度之外的剩余宽度*/比较：

一列变宽一列固定的传统方法一列变宽，一列固定在响应式布局中比较常见思路：设置左边列浮动，右边列不浮动，右边列的左margin等于左边列的宽度。使用弹性盒模型进行1-3-1版式布局弹性容器中的每一个直接子元素都会变成弹性子元素，弹性容器中直接包含的无标记环绕的文本也会变为匿名弹性子元素。float和clear，vertical-align属性对弹性子元素对齐无效。1-3-1版式布局代码<header>header</header><divclass="main">

<article>article</article><nav>nav</nav>

<aside>aside</aside></div><footer>footer</footer>.main{ display:flex;flex-flow:row; }.main>article{ flex:3; order:2;}.main>nav{ flex:1; order:1;}.main>aside{ flex:1; order:3;}实现响应式布局窄屏时3个栏目框上下排列@mediaalland(max-width: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; }}5.6.2分栏布局网页如何实现报纸上的分栏布局效果？column-count:把元素中的内容均分为几列：

div.col{-webkit-column-count:3;}

div.col{-webkit-column-width:300px;}2.3.5头部代码设置在响应式网页中，必须使用<meta>标记设置视口（viewport），代码如下：<metaname="viewport"content="width=device-width,initial-scale=1">width=device-width：将网页宽度缩放为屏幕宽度，initial-scale=1表示相对于可见视口进行缩放，初始缩放比例是17.2响应式布局的网站实例页面布局的代码实现<header>页头</header><nav>导航</nav><sectionclass="clearfix"><aside>侧边栏</aside><article>文章</article></section><footer>页脚</footer>移动端页面布局的实现@media(max-width:720px){aside,article{float:none;width:100%;}}7.2.2页头的设计页头部分采用大图平铺、中心定位的设计思想。网页足够宽时，将显示页头的整个背景图片，网页变窄时，逐渐隐藏图片的两侧，只显示中间区域。header{width:100%; min-height:200px;background:url(img/banner.jpg)no-repeatcentercenter; /*从中心扩展*/background-size:cover;position:relative; }7.2.3响应式导航条的制作#menuulli{ float:left; }@media(max-width:768px){ #menuulli{float:none;text-align:center;} }小屏幕下导航条的按钮切换响应式导航条就能在显示和隐藏两种状态之间切换，如图所示。这种切换状态和复选框的选中状态切换很相似，并且CSS3支持:checked伪类选择器但是如果直接在页面上放一个复选框，则页面会显得很难看。为此，可以用一张“汉堡按钮”的图片代替该复选框，并且要能实现单击该图片就等价于单击复选框的效果。而我们知道，可以将一个表单元素和一个<label>标记关联起来汉堡按钮的本质汉堡按钮：复选框思路：用一个<label>标记的for属性绑定复选框，这样单击label标记就相当于单击复选框了。然后隐藏复选框第3步：设置label标记的背景图片为汉堡按钮图片制作网站的方法首先把导航栏、栏目框等网页元素做好然后制作网页的布局最后把导航栏、栏目框等填入的网页布局的格子中。7.2.4响应式栏目的制作由于每列的宽度是变化的，因此每个栏目都不能设置绝对宽度，而只能设置相对宽度（百分比）。除此之外，还要考虑列很窄的