商务网页设计与制作（第2版）课件 第22课 响应式网页设计与制作

第4章 CSS网页式样制作技术4.8响应式网页设计与制作4.8.1浏览器与屏幕尺寸适配4.8.2设置弹性页面4.8.3设置flex弹性容器4.8.4设计流式布局4.8.5制作响应式网页范例4.8.6响应式网页开发前端框架4.8响应式网页设计与制作响应式布局就是针对不同宽度的设备进行布局和样式的制作，从而自动适配不同屏幕尺寸的设备。各个厂家显示设备的屏幕大小不是完全一致的，大体可划分为以下几个屏幕区间：手机：768像素以内平板：768~992像素之间桌面显示器：992~1200像素宽屏设备：1200像素以上响应式设计，需要用一个容器作为父元素，让子元素（通常为具有一定功能的模块，也可称之为子模块、子项目，下同）在父元素的箱体内随着父元素的尺寸变化而自动改变排列方式和大小，让手机、平板、电脑用户均能较好地浏览网页。响应式设计的实现方式主要包括以下几个主要方面：浏览器与屏幕尺寸适配、适应不同尺寸屏幕的响应式页面设置、弹性flex容器设置，以及流式布局设计。01/03/02/04/其中，name=”viewport”指定该元数据为虚拟窗口类型，“width=device-width”指定虚拟窗口宽度为设备宽度，“initial-scale=1”确定最小缩放倍数为1，“maximum-scale=1”确定最大缩放倍数为1。通过设置Viewport的宽度让手机浏览器的窗口宽度与手机屏幕宽度相同，达到完美适配，这是响应式设计的一个基本步骤。<metaname=”viewport”content=”width=device-width,initial-scale=1,maximum-scale=1”>4.8.1浏览器与屏幕尺寸适配将移动端浏览器虚拟窗口Viewport设成与设备屏幕等宽，需要使用元数据标签<meta>及其name、content属性，参考设置方法为CONTENT4.8.3设置弹性页面划分屏幕区间。设置弹性页面，通常将屏幕尺寸划分为n个区间，确定区间分界值，每个屏幕区间确定一种布局设计，从而完成弹性页面的设计。弹性页面至少要满足2个以上屏幕区间的浏览需要，才能体现出响应式设计的优点。实践中通常设计3-5个区间就能满足弹性页面的设计需要。屏幕区间的适配。在CSS中，可以通过@media命令来查询当前设备的屏幕大小，根据屏幕区间划分所设定的屏幕区间分界值进行比对判断。当设定的比对条件被满足时，则执行该条件下的所有CSS布局样式，这是响应式布局设计的关键点。屏幕区间划分的分界值不是固定的，可以根据具体项目特点做适当的调整。而且，屏幕区间的划分还可以针对多数用户的使用习惯，将屏幕区间进一步细化，以求弹性页面完美适配多数用户使用的需要。设置弹性页面有两种方案：一是移动端优先、二是PC端优先。1.移动端优先方案随着移动互联网的普及，移动端应用的快速增长，当前网页布局分界多采用移动端优先方案，其页面布局首先要满足移动端浏览的需要，然后兼顾大屏幕设备使用。采用移动端优先方案，应当使用@media命令及其mini-width属性，将屏幕最小的放在前面，屏幕最大的放在后面。下面列出了一种移动端优先的布局分界参考设置方法：/*屏幕超小设备不予细分(768px以下)*/选择符1{}选择符2{}……@mediascreenand(min-width:768px){/*手机设备*/选择符1{}选择符2{}……}@mediascreenand(min-width:992px){/*平板类设备*/选择符1{}选择符2{}……}@mediascreenand(min-width:1200px){/*PC机等大屏幕设备*/选择符1{}选择符2{}……}有的网站的使用场景主要面向PC机，这类网站应当首先保证PC端的应用，然后兼顾移动端应用。采用PC端优先方案，应当使用@media命令及其max-width属性，将屏幕最大的放在前面，屏幕最小的放在后面。下面列出了一种PC端优先的布局分界参考设置方法：/*屏幕超大设备不予细分(1200px以上)*/选择符1{}选择符2{}……}@mediascreenand(max-width:1200px){/*PC机等大屏幕设备*/选择符1{}选择符2{}……}@mediascreenand(max-width:992px){/*平板类设备*/选择符1{}选择符2{}……}@mediascreenand(max-width:768px){/*手机设备*/选择符1{}选择符2{}……}4.8.3设置flex弹性容器1.理解Flex横轴与纵轴响应式网页设计离不开flex弹性容器。我们通常将一个父容器定义为flex弹性盒子容器，然后将各个模块化的内容模块作为子元素装入这个弹性容器中，通过对容器和子元素相关属性进行设置，即可实现响应式布局设计与开发。在flex容器中默认存在两条轴，既横轴和纵轴，默认情况下横轴为主轴。主轴不是一成不变的，可以通过语句命令来动态设置主轴为横轴或纵轴。轴有上下左右四个方向，任何方向的轴均可作为主轴使用。横轴是指从左向右的方向（正向），从右向左为反向横轴。纵轴是指从上向下的方向（正向），从下向上为反向纵轴。主轴及正反向的变化会带来不一样的布局效果，响应式网页设计必须主轴为基准进行设计。建议以纵轴为主轴（mainaxis）、横轴为交叉轴（crossaxis，亦称副轴）更有利于响应式网页的制作。2.定义flex弹性容器实现flex布局需要先指定一个父容器，通常容器类元素均可作为父容器被指定为flex容器。之后，flex容器内部的子元素就可以使用flex技术进行布局。鉴于DIV元素的众多优点，绝大部分情况下均使用DIV作为flex父容器，子元素也以DIV元素居多。设置flex容器需要使用容器元素选择符及display属性，设置方法为容器元素选择符｛display:flex|inline-flex;｝其中，属性值flex适用于块级元素，inline-flex适用于内联元素。有一点需要注意，当父容器设置为flex弹性盒子之后，其子元素的float、clear、vertical-align等属性就失效了，这是响应式网页设计的需要。3.设置flex容器弹性布局属性Flex容器中有6个重要属性与flex布局有关，分别是flex-direction、flex-wrap、flex-flow、justify-content、align-items和align-content。（1）主轴属性Flex-direction该属性是确定主轴的，既横轴（反向横轴）为主轴还是纵轴（反向纵轴）为主轴。设置主轴的参考方法为容器元素选择符｛display:flex;/*设置容器为flex弹性盒子*/flex-direction:row|row-reverse|column|column-reverse;/*设置主轴*/｝其中，row值为默认值，定义横轴为主轴。row-reverse定义反向横轴为主轴，column定义纵轴为主轴，column-reverse定义纵向反向纵轴为主轴。主轴决定子元素排列的方式。四种主轴的排列效果见图4.44（2）换行属性flex-wrap弹性容器内的子元素都是按照主轴方向依次排列的。当到达容器边界时，子元素是否换行显示取决于flex-wrap的设置。设置flex-wrap的参考方法为容器元素选择符｛display:flex;/*设置容器为flex弹性盒子*/flex-wrap:nowrap|wrap|wrap-reverse;/*设置子元素是否换行*/｝其中，nowrap为默认值，不换行。当容器内的元素到达边界时，自动调整缩小项目尺寸不会换行。Wrap代表换行，wrap-reverse代表反向换行（向上换行）。Flex-wrap各属性值所规定的换行方式效果展示见图4.45。（3）复合属性flex-flow复合属性flex-flow复合了flex-direction、flex-wrap属性，是这两种属性的简洁表达。参考的设置方法为容器元素选择符｛display:flex;/*设置容器为flex弹性盒子*/flex-flow:flex-direction属性值flex-wrap属性值/*设置两个属性值*/｝

复合属性flex-flow没有实质性改进作用，实践中建议分别采用flex-direction、flex-wrap书写表达更简单易懂。（4）主轴对齐属性justify-content该属性规定容器中的子元素沿主轴方向的对齐方式，包括起始端对齐、末端对齐、居中对齐、两端对齐、子元素两侧间距相等5种形式。设置主轴对齐属性的参考方法为容器元素选择符｛display:flex;/*设置容器为flex弹性盒子*/justify-content:flex-start|flex-end|center|space-between|space-around;｝其中，flex-start为起始端对齐，flex-end为末端对齐，center为居中对齐，space-between为两端对齐，space-around为两侧间距相等对齐。各种对齐方式的效果见图4.46（5）交叉轴对齐属性align-items该属性规定容器内的子元素在交叉轴（副轴）上的对齐方式。如果主轴为横轴，则交叉轴就是纵轴；如果主轴是纵轴，则交叉轴为横轴。该属性的参考设置方法为容器元素选择符｛display:flex;/*设置容器为flex弹性盒子*/align-items:flex-start|flex-end|center|baseline|stretch;｝其中，stretch为默认值，为拉伸对齐。在主轴为横轴或反向横轴的情况下，如果容器内的子元素未设置高度或者其高度设为auto，则子元素将拉伸至容器的高度。flex-start为交叉轴起始端对齐，flex-end为交叉轴末端对齐，center为交叉轴居中对齐，baseline为子元素第一行文字的基线对齐。交叉轴各种对齐方式的效果见图4.47。（6）多轴对齐属性align-content如果容器只设立一根主轴（既容器的flex-wrap设为nowrap），该属性不起作用。当容器的flex-wrap属性设为wrap且容器内子元素的总宽度大于容器宽度时（假定主轴为横轴），则自然产生多行（有的书称为多轴），也同时产生了主轴的交叉轴，此时align-content就会起作用。设置多轴的对齐方式，参考方法为容器元素选择符｛display:flex;/*设置容器为flex弹性盒子*/flex-wrap:wrap;/*设置为可换行*/align-content:flex-start|flex-end|center|space-between|space-around|stretch;｝其中，stretch是容器的默认属性，是指在交叉轴上拉伸布局。假设主轴为横轴，如果子元素的高度也设为stretch或auto，则在交叉轴上拉伸至容器高度进行布局。如果是多行（多轴），则各行平均分配父容器的高度。flex-start为各行子元素均基于交叉轴的起始端对齐，flex-end为各行子元素均基于交叉轴的末端对齐，center为基于交叉轴的中线对齐，space-between为交叉轴的上下两端对齐且各行子元素平均分配高度，space-around为基于交叉轴的上下两端对齐且上下两侧边距相等。多轴对齐属性的效果见图4.48。（2）主轴空间属性flex-basis该属性规定子元素在分配多余主轴空间之前，先分配该子元素占用多少主轴空间，浏览器会根据这个属性来计算主轴是否有多余空间。设置元素占用主轴空间属性的方法为子元素选择符｛flex-basis:空间占用值|auto;｝该属性默认值为auto，即按照元素本来的大小显示,这时候该元素的大小取决于width或height的值，且该值不会被计入容器在主轴的剩余空间中。如果容器的主轴为横轴，子元素设置了flex-basis空间比例，则子元素的宽度设置值就会失效。主轴空间的属性值为百分数，用来确定该元素在容器中所占的比例。当flex-basis值为0%时，规定该元素为零尺寸，即使定义了width=140px也不会有效果。空间属性flex-basis通常需要跟放大属性flex-grow和缩小属性flex-shrink配合使用。4.设置子元素弹性布局属性子元素有6个flex布局属性，分别为order、flex-basis、flex-grow、flex-shrink、flex、align-self，这些属性将决定flex布局。（1）排列顺序属性order该属性规定子元素在容器中的排列顺序，整数值。数值越小，排列越靠前，默认值为0，可以设为负数，如无特殊用途不建议设为负数。容器中各个子元素的排列，不按照创建次序先后排列，而是按照order规定的次序排列。设置子元素排列顺序的方法为子元素选择符｛order:序号值;/*设置排列顺序号，可为0、1、2……*/｝（3）放大属性flex-grow该属性定义容器中的子元素可放大的比例，设置方法为子元素选择符｛flex-grow:放大值;｝该属性默认值为0，规定了即使容器存在剩余空间，也不会被放大尺寸。如果该属性为某一数值，代表该元素在容器剩余空间中占有的份额。在一个容器中，当所有的子元素都以flex-basis的值进行排列后，还有剩余空间，这时候flex-grow才能发挥。例如，容器中有3个元素，第一个元素的flex-grow值为1，第二个元素的flex-grow值为2，第三个元素的flex-grow值为1。在按照flex-basis的值排列后，该容器剩余空间为200px，这时就会按照各个元素的flex-grow值的份额所占比率分配剩余空间。由此计算出本例第一个元素占用25%[1/（1+2+1）]的剩余空间，第二个元素占用50%的剩余空间，第三个元素占用25%的剩余空间。上例中，如果当所有元素以flex-basis的值排列后超出了容器的总空间，且容器的flex-wrap设为nowrap时，flex-grow就不会起作用，需要使用flex-shrink缩小属性。（4）缩小属性flex-shrink该属性规定子元素的缩小比例，设置方法为子元素选择符｛flex-shrink:缩小值;｝该属性的默认值为1，表示如果容器的空间不够排列所有的子元素，该元素就会等比缩小。如果设置flex-shrink的值为0，表示该元素不受空间不足影响保持原来的尺寸不变。进一步，如果容器内所有子元素的flex-shrink属性都为1，当空间不足时，都将等比缩小；如果一个子元素的flex-shrink属性为0，其他子元素都为1，当空间不足时，前者不缩小，其他子元素等比缩小。（5）复合属性flex复合属性flex复合了flex-grow、flex-shrink和flex-basis，简洁表示三个属性的值。该属性的设置方法为子元素选择符｛flex:flex-growflex-shrinkflex-basis;/*一次赋值3个属性*/｝复合属性flex的用法比较复杂，建议初学者分别使用flex-grow、flex-shrink和flex-basis设置flex布局。（6）子元素对齐属性align-self在父容器中，通常通过容器给所有子元素统一定义了对齐属性。为了突出显示某一子元素的特殊地位，可以单独对这个子元素定义对齐属性，使之对齐方式不同于其他子元素。子元素对齐属性的设置方法为子元素选择符｛align-self:auto|flex-start|flex-end|center|baseline|stretch;｝该属性值的含义与父容器的align-items相同，只是用法上不同。该属性作用于容器内的单个子元素，而align-items作用于容器内的所有子元素，而且子元素align-self属性的优先级高于父元素的align-items属性。4.8.4设计流式布局1.网页内容模块化设计对页面进行响应式设计，需要对网页内容进行模块化设计，模块化设计是流式布局的前提。在响应式设计中，大部分情况下，需要将网页内容封装在若干模块中。所以，对网页内容的模块化抽象设计是非常重要的，需要合理归纳网页内容，使之符合模块化设计的要求。2.流式布局流式布局主要是针对不同的屏幕宽度来布局的。流式布局的设计模式有两种：PC端优先（从PC端开始向小屏幕方向设计）；移动端优先（从移动端开始向PC端大屏幕设计）。无论基于那种模式的设计，为自适应不同屏幕大小的设备，在网页响应时不可避免地需要对模块化布局做一些改变。比如一个网页在浏览器窗口挤压-拉伸时，网页内的模块发生位置变化，好像模块流动了一样，见图4.49。（1）图片的流式布局设计网页中的图片分为内容图片（嵌入式引用）和背景图片两种情况。在网页中嵌入自适应页面的图片，需要设置图像选择符和宽度属性，将其宽度的百分比设置为100%来控制图片的自适应缩放。采用CSS设置图片自适应的方法为图像选择符｛Width:100%;｝

响应式设计很多情况下，都需要将图像宽度设置为100%，而高度采用默认值即可，图像长宽比例不会变化。在网页中设置响应式背景图片，可以在容器类型的元素选择符样式中，设置背景图像为不重复，并将宽度的百分比设为100%，或将背景图像大小设为cover等方法实现。采用CSS设置响应式背景图片的参考方法为容器元素选择符｛background-image:url(img_URL);background-repeat:no-repeat;

background-size:100%;/*100%可换成cover*/｝（2）文本的流式布局设计文本的流式布局设计相对简单，只需要将文本封装在一个模块化的容器中即可，设置好字体、颜色、大小，以及行间距、字间距等即可。在响应式设计中，通常将文本封装在一个DIV块中。DIV在当前网页设计中的地位非常重要，大部分网页的排版均是通过模块化的DIV块来实现的。4.8.5制作响应式网页范例本范例针对4.8.4节中流式布局效果图（见图4.49），实现响应式布局页面的设计与制作。该布局是一种典型的布局方案，针对移动端、PC端应用进行设计，本范例采用移动端优先方案。第一步：对网页布局进行分析和设计。设立页眉、页脚、导航、文章和侧边栏5个区块，并按照宽屏、窄屏的变化特点进行布局构思，兼顾内容展示和美观设计。本范例采用移动端优先方案，故首先对移动端页面布局进行设计，当屏幕宽度大于分界值时，再转用宽屏页面布局设计。此时应该对页面的高度、宽度，以及各个区块的高度宽度进行测量和计算，以达到较好的布局效果。第二步；编写HTML框架。完成头文档、主文档的代码制作。第三步：适配移动端浏览器。在HTML头文档中使用元数据<meta>标签设置手机虚拟窗口及相关属性，通常以屏幕宽度适配浏览器。第四步：在头文档中编写弹性布局CSS样式（或链接导入样式文件）。1.制作弹性容器样式。设置为弹性容器作为父容器，按照移动端优先原则，设置主轴为纵轴，并按照移动端页面布局方案赋值高度、宽度信息；2.定义容器中所有子元素样式。本例中，文章、导航和侧边栏3个区块适合放在盒