第3章 弹性布局与响应式图片
页面自适应原则 -回复
页面自适应原则-回复页面自适应原则，也称响应式设计，是一种使网页布局能根据不同设备或浏览器自动调整的设计原则。
随着不同的设备和屏幕尺寸的增加，如手机、平板电脑和笔记本电脑等，保证网页在各种设备上都能良好地显示和操作变得越来越重要。
页面自适应原则旨在提供用户友好的体验，无论用户所使用的设备尺寸和屏幕分辨率如何，网页都能自动适应最佳布局。
页面自适应原则主要包括以下几个方面：1. 弹性布局：弹性布局是指使用相对单位（如百分比）而非固定单位（如像素）来设置宽度、高度和位置。
相对单位可以根据屏幕尺寸和设备分辨率自动调整，从而实现页面的伸缩性。
通过使用弹性布局，网页可以根据不同的设备自动调整大小，使内容在各种分辨率下都能清晰可见。
2. 媒体查询：媒体查询是一种CSS3的功能，它可以根据不同设备的特性和属性设置不同的样式。
通过使用媒体查询，开发人员可以针对不同设备设置不同的布局和样式，从而实现页面的自适应。
例如，可以根据屏幕宽度来设置导航栏的显示方式，使其在手机上以菜单形式显示，在平板和电脑上以水平导航的形式显示。
3. 图片和媒体的优化：为了适应不同设备的显示和加载速度，页面自适应原则还包括对图片和媒体的优化。
可以使用响应式图片技术来根据设备分辨率加载适当大小的图片，从而减少加载时间和带宽消耗。
同时，还可以使用HTML5的video和audio标签来适应不同浏览器和设备对多媒体内容的支持，提供更好的用户体验。
4. 流体网格布局：流体网格布局是指使用百分比和相对单位来设置网页的布局，使其能够在不同设备上自动适应。
通过将网页划分为多个区域，并设置其宽度为百分比，可以使网页在不同设备上自动调整布局，从而适应不同的屏幕尺寸和分辨率。
5. 触摸和手势支持：随着触摸屏设备的普及，页面自适应原则还需要考虑对触摸和手势的支持。
例如，在手机上可以将菜单设置成可滑动的形式，用户只需滑动屏幕就能打开或关闭菜单，提供更好的操作体验。
移动端适配的方法
移动端适配的方法随着智能手机的普及，移动端的用户群体也越来越庞大。
为了提供更好的用户体验，开发人员需要对移动端进行适配，使网页在不同尺寸的移动设备上都能够正常显示。
本文将介绍几种常用的移动端适配方法。
1. 媒体查询（Media Queries）媒体查询是CSS3的一项特性，可以根据不同的媒体类型和媒体特性为不同的设备提供不同的样式。
通过使用媒体查询，可以根据设备的屏幕尺寸、分辨率等特性，为移动端设备提供适配的样式。
2. 弹性布局（Flexible Layout）弹性布局是一种流式布局，可以根据设备的屏幕尺寸自动调整元素的大小和位置。
通过使用弹性布局，可以使网页在不同尺寸的移动设备上自适应，实现移动端适配。
3. REM单位REM单位是相对于根元素（html元素）的字体大小的单位。
通过设置根元素的字体大小，可以动态地调整REM单位的大小。
通过使用REM单位，可以实现移动端的适配。
4. ViewportViewport是指浏览器可视区域的大小。
通过设置Viewport的大小，可以控制网页在移动设备上的显示效果。
通过设置Viewport的meta标签，可以指定网页的宽度、缩放比例等参数，实现移动端适配。
5. 图片适配在移动端适配中，图片的适配也是非常重要的。
为了提高网页的加载速度和用户体验，可以使用响应式图片、图片压缩等技术来适配移动端设备。
6. 字体适配在移动端适配中，字体的适配也是需要考虑的因素之一。
为了保证网页的字体在不同设备上显示效果一致，可以使用媒体查询、字体单位等技术来适配移动端设备。
7. 移动端事件在移动端适配中，移动端的事件也需要适配。
由于移动设备的触摸操作与鼠标操作不同，需要使用移动端的事件来适配移动设备。
例如，可以使用touchstart、touchmove、touchend等事件来实现移动端的交互效果。
8. 响应式框架响应式框架是一种可以自动适应不同设备的框架。
通过使用响应式框架，可以快速地实现移动端适配，提高开发效率。
移动端开发技巧：适配不同屏幕尺寸(二)
移动端开发技巧：适配不同屏幕尺寸随着智能手机的普及，移动应用已经成为人们日常生活不可或缺的一部分。
而面对不同品牌、不同尺寸的移动设备，如何在不同屏幕尺寸上实现良好的用户体验就成为了移动端开发者需要重视的问题。
本文将探讨一些适配不同屏幕尺寸的开发技巧。
一、响应式布局响应式布局是一种适应不同屏幕尺寸的常用技巧。
通过使用CSS 的媒体查询功能，开发者可以根据不同屏幕宽度应用不同的样式。
比如，在大屏幕设备上，可以采用多列布局，而在小屏幕上则应采用单列布局，以保证内容在各种屏幕尺寸上的可读性。
二、流式布局流式布局是另一种适应不同屏幕尺寸的常见方式。
相对于固定像素的布局，流式布局使用百分比单位来定义元素的宽度，使得页面能够根据屏幕尺寸自动调整。
这种布局方式可以确保在不同设备上内容的流畅呈现，但也可能导致布局在极端情况下出现扭曲或者拉伸的问题，开发者需要注意控制元素的最小和最大宽度。
三、弹性图片在适配不同屏幕尺寸时，图片的大小也是一个需要考虑的问题。
为了解决这个问题，开发者可以使用弹性图片，即通过CSS样式指定图片的最大和最小宽度，让图片能在不同设备上自适应调整。
此外，还可以使用矢量图形代替位图来适配多个屏幕分辨率，保证图像清晰度和质量。
四、断点设置为了更好地适配不同屏幕尺寸，开发者可以通过设置断点来调整布局和样式。
断点是指在特定屏幕宽度下，布局和样式发生改变的分界点。
例如，可以设置一个断点，在屏幕宽度小于等于600px时，应用单列布局和简化样式。
通过合理设置断点，可以使得在不同屏幕尺寸上都能提供最佳的可视和操作体验。
五、多版本适配除了不同屏幕尺寸，不同操作系统和设备类型也是需要考虑的因素。
针对iOS和Android系统的差异，开发者可以选择使用相应平台的开发工具和最佳实践。
此外，根据不同设备的硬件能力，可以针对性地选择合适的交互方式和特性，以提升用户体验。
六、测试与优化适配不同屏幕尺寸的工作并不仅仅是一次性的，开发者在完成初步适配后还需要进行测试和优化。
移动端开发技巧：适配不同屏幕尺寸(一)
移动端开发技巧：适配不同屏幕尺寸随着智能手机的普及，移动应用程序的开发变得越来越重要。
然而，不同的手机屏幕尺寸和分辨率导致移动端开发具有一定的挑战性。
为了在不同设备上提供良好的用户体验，开发人员需要掌握适配不同屏幕尺寸的技巧。
1. 响应式布局响应式布局是一种常用的适配不同屏幕尺寸的技术。
通过使用相对单位（例如百分比）和媒体查询，在不同设备上实现自适应的布局。
这样的布局可以根据设备的屏幕尺寸和方向进行调整，使应用程序在不同设备上呈现一致的用户界面。
2. 弹性布局弹性布局是一种适用于移动端开发的布局模式。
它使用弹性盒子模型（Flexbox）来调整和适配不同尺寸的屏幕。
通过使用弹性容器和弹性项，开发人员可以方便地调整元素的大小，使其适应不同的屏幕尺寸。
3. 图片适配在不同尺寸的屏幕上显示图片时，开发人员需要考虑图片的适配问题。
一种常见的解决方案是使用CSS的background-size属性来调整图片的大小，以适应不同的屏幕尺寸。
另外，使用矢量图形（如SVG）可以使图像保持清晰并适应不同的分辨率。
4. 文字适配在不同屏幕尺寸上，文字的大小和行距需要适应不同的显示区域。
为了实现文字的适配，可以使用CSS的媒体查询和字体单位来动态调整文字的大小。
此外，还可以使用CSS的行高属性来调整行距，以确保在不同屏幕尺寸下文字显示清晰、易读。
5. 触摸事件适配由于触摸屏的普及，移动应用程序的用户界面通常需要支持多点触控和手势操作。
为了适配不同尺寸的屏幕，开发人员需要处理不同设备上触摸事件的差异性。
可以使用JavaScript库来简化触摸事件的处理，并确保应用程序在不同设备上具有相同的交互体验。
6. 设备检测不同设备和浏览器可能有不同的特性和限制，为了适配不同屏幕尺寸，开发人员需要进行设备检测。
可以使用JavaScript的navigator对象或相关的开源库来识别设备类型和特性。
通过检测设备信息，开发人员可以针对不同设备采取不同的适配方法，以提供最佳的用户体验。
css3响应式布局ppt课件
烧伤病人的治疗通常是取烧伤病人的 健康皮 肤进行 自体移 植，但 对于大 面积烧 伤病人 来讲， 健康皮 肤很有 限，请 同学们 想一想 如何来 治疗该 病人
烧伤病人的治疗通常是取烧伤病人的 健康皮 肤进行 自体移 植，但 对于大 面积烧 伤病人 来讲， 健康皮 肤很有 限，请 同学们 想一想 如何来 治疗该 病人
烧伤病人的治疗通常是取烧伤病人的 健康皮 肤进行 自体移 植，但 对于大 面积烧 伤病人 来讲， 健康皮 肤很有 限，请 同学们 想一想 如何来 治疗该 病人
烧伤病人的治疗通常是取烧伤病人的 健康皮 肤进行 自体移 植，但 对于大 面积烧 伤病人 来讲， 健康皮 肤很有 限，请 同学们 想一想 如何来 治疗该 病人
(max-width:600px)" href="link.css" /> (2)在样式表中内嵌@media:
@media screen and(max-width:600px){ 选择器{
属性:属性值; }
}
烧伤病人的治疗通常是取烧伤病人的 健康皮 肤进行 自体移 植，但 对于大 面积烧 伤病人 来讲， 健康皮 肤很有 限，请 同学们 想一想 如何来 治疗该 病人
烧伤病人的治疗通常是取烧伤病人的 健康皮 肤进行 自体移 植，但 对于大 面积烧 伤病人 来讲， 健康皮 肤很有 限，请 同学们 想一想 如何来 治疗该 病人
Media Query语法详解 <link rel="stylesheet" media="screen and(max-width:600px)" href="small.css" /> 1.screen:指的是一种媒体类型; 2.and:被称为关键词,与其相似的还有not,only.可能的操作符 3.max-width:600px这个就是属性值,媒体特性,也就是媒体条件.
响应式设计的基本原理
响应式设计的基本原理
响应式设计是一种以用户为中心的设计方法，旨在为不同设备和屏幕尺寸提供一致的用户体验。
其基本原理包括以下几个方面：
1. 弹性布局：采用相对单位和百分比来定义元素的大小和位置，使得布局能够根据屏幕尺寸自动调整，从而适应不同的设备。
例如，使用CSS的百分比单位来定义宽度和高度，以及使用
相对单位来定义边距和内边距。
2. 媒体查询：通过使用CSS的@media规则，根据设备的屏幕
尺寸和其他特征，为不同的屏幕宽度应用不同的样式文件或规则。
例如，当屏幕宽度小于某个阈值时，可以隐藏某些元素、调整布局或改变字体大小。
3. 图像优化：为了适应不同的屏幕分辨率和加载速度，使用响应式图像的技术，即根据设备的屏幕大小和像素密度，动态加载最合适的图像。
例如，使用HTML5的srcset属性或CSS的background-size属性来根据屏幕大小显示不同的图像。
4. 栅格系统：采用栅格系统来组织和布局页面内容，以确保页面在不同的设备上都能够呈现合理的结构。
栅格系统将页面划分为多个列和行，并使用CSS的媒体查询来调整列的布局和
大小。
5. 移动优先：在设计上以移动设备为优先考虑，即首先设计和优化移动端的用户体验，然后逐步适应较大屏幕设备。
这种方
法可以确保在较小屏幕上正常显示页面，并且在较大屏幕上提供更丰富的体验。
通过以上原理，响应式设计可以使网站或应用程序在不同设备上都能够提供良好的用户体验，无论是手机、平板还是桌面电脑。
弹性布局详解——5个div让你学会弹性布局
弹性布局详解——5个div让你学会弹性布局1 弹性布局简介弹性布局，⼜称“Flex布局”，是由W3C⽼⼤哥于2009年推出的⼀种布局⽅式。
可以简便、完整、响应式地实现各种页⾯布局。
⽽且已经得到所有主流浏览器的⽀持，我们可以放⼼⼤胆的使⽤。
>>> 了解两个基本概念，接下来会频繁提到：①容器：需要添加弹性布局的⽗元素；②项⽬：弹性布局容器中的每⼀个⼦元素，称为项⽬；>>> 了解两个基本⽅向，这个牵扯到弹性布局的使⽤：①主轴：在弹性布局中，我们会通过属性规定⽔平/垂直⽅向为主轴；②交叉轴：与主轴垂直的另⼀⽅向，称为交叉轴。
2 弹性布局的使⽤①给⽗容器添加display: flex/inline-flex;属性，即可使容器内容采⽤弹性布局显⽰，⽽不遵循常规⽂档流的显⽰⽅式；②容器添加弹性布局后，仅仅是容器内容采⽤弹性布局，⽽容器⾃⾝在⽂档流中的定位⽅式依然遵循常规⽂档流；③ display:flex; 容器添加弹性布局后，显⽰为块级元素；display:inline-flex; 容器添加弹性布局后，显⽰为⾏级元素；④设为 Flex布局后，⼦元素的float、clear和vertical-align属性将失效。
但是position属性，依然⽣效。
2.1代码实例<div id="div"><div class="div1">1</div><div class="div2">2</div><div class="div3">3</div><div class="div4">4</div></div>#div{width: 400px;height: 400px;background-color: yellow;display: flex;}#div div{width: 100px;height: 100px;background-color: blue;color: white;font-size: 30px;}五个简单的div，只给⽗容器添加了display: flex;属性，就可以让容器内部打破原有⽂档流模式，展现为弹性布局。
计算机软件使用教程之网页设计与交互
计算机软件使用教程之网页设计与交互第一章：网页设计基础知识在进行网页设计与交互之前，我们首先需要了解一些网页设计的基础知识。
网页设计是一个综合性的学科，涉及到色彩搭配、排版、图像处理等多个方面。
首先我们来了解一下几个常用的设计软件。
1. Adobe PhotoshopAdobe Photoshop是一款功能强大的图像处理软件，常用于网页设计中的图片处理与编辑。
通过Photoshop，我们可以对网页中的图片进行裁剪、调整大小、色彩修正等操作，以满足我们对于图片的需求。
此外，Photoshop还有一个重要的功能就是切片，即将整个页面切分成多个小块，这样可以使得页面的加载速度更快，提高用户体验。
2. Adobe IllustratorAdobe Illustrator是一款矢量图形编辑软件，常用于网页设计中的图标、标志等元素的设计。
相比于位图，矢量图形可以无限放大而不失真，因此在网页中使用矢量图形可以保证图形的清晰度和质量。
3. SketchSketch是一款专业的界面设计软件，被广泛应用于网页和移动应用的设计。
与Adobe系列软件相比，Sketch更加轻量级，功能简洁实用，适合进行快速原型设计和交互设计。
同时，Sketch还可以与其他设计工具相互配合，例如Zeplin、InVision等，提高工作效率。
第二章：网页设计常用的交互元素网页设计中的交互元素是指用户与网页进行交互的一些功能组件，例如导航菜单、按钮、表单等。
合理的交互元素设计可以提升用户的使用体验，下面我们来了解一些常用的交互元素。
1. 导航菜单导航菜单是网页设计中最基本的交互元素之一，它可以帮助用户快速定位到所需的信息。
在设计导航菜单时，需考虑菜单的位置、样式、交互效果等要素，以保证用户能够轻松找到所需的页面。
2. 按钮按钮是网页中常用的交互元素，它可以帮助用户完成特定的操作，例如提交表单、下载文件等。
在设计按钮时，需要注意按钮的样式、颜色、大小等，以及鼠标悬停和点击等交互效果，以增加用户的操作可感知性。
页面布局的几种方式（静态化布局，流式布局，自适应布局，响应式布局，弹性布局）
页⾯布局的⼏种⽅式（静态化布局，流式布局，⾃适应布局，响应式布局，弹性布局）⼀、静态布局（static layout） 即传统Web设计，⽹页上的所有元素的尺⼨⼀律使⽤px作为单位。
1、布局特点 不管浏览器尺⼨具体是多少，⽹页布局始终按照最初写代码时的布局来显⽰。
常规的pc的⽹站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果⼩于这个宽度就会出现滚动条，如果⼤于这个宽度则内容居中外加背景，这种设计常见于pc端。
2、设计⽅法 PC：居中布局，所有样式使⽤绝对宽度/⾼度(px)，设计⼀个Layout，在屏幕宽⾼有调整时，使⽤横向和竖向的滚动条来查阅被遮掩部分； 移动设备：另外建⽴移动⽹站，单独设计⼀个布局，使⽤不同的域名如wap.或m.根据浏览器⽤户代理，识别移动端，并重定向。
pc端⾃适应设计详情参考优点：这种布局⽅式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。
缺点：显⽽易见，即不能根据⽤户的屏幕尺⼨做出不同的表现。
当前，⼤部分门户⽹站、⼤部分企业的PC宣传站点都采⽤了这种布局⽅式。
固定像素尺⼨的⽹页是匹配固定像素尺⼨显⽰器的最简单办法。
但这种⽅法不是⼀种完全兼容未来⽹页的制作⽅法，我们需要⼀些适应未知设备的⽅法。
⼆、流式布局（Liquid Layout） 流式布局（Liquid）的特点（也叫"Fluid") 是页⾯元素的宽度按照屏幕分辨率进⾏适配调整，但整体布局不变。
代表作栅栏系统（⽹格系统）。
⽹页中主要的划分区域的尺⼨使⽤百分数（搭配min-*、max-*属性使⽤），例如，设置⽹页主体的宽度为80%，min-width为960px。
图⽚也作类似处理（width:100%, max-width⼀般设定为图⽚本⾝的尺⼨，防⽌被拉伸⽽失真）。
1. 布局特点 屏幕分辨率变化时，页⾯⾥元素的⼤⼩会变化⽽但布局不变。
【这就导致如果屏幕太⼤或者太⼩都会导致元素⽆法正常显⽰。
bootstrap响应式网站开发实例教程ppt课件第3章第2-3节
【实例3-8 】实现列的嵌套排版，其中的添加样式
【实例3-8】中的HTML代码
13
图3-13 列嵌套布局页面效果
《 Bootstrap 响应式网站开发 》
Boot st rap 栅格系统-- 栅格系统的常用方法
实例 3-8 中在第二列 “ <div class="col-md-9"> ” 中了一个 “ <div class="row"> ” 元素，并在 row 内部嵌套了个 <div class="col-md-6"> ，从而实现了图 3-13 所示的页面效果。
Boot st rap 栅格系统-- 栅格系统的常用方法
为了能让元素呈现清晰【实例3-5】中的添加样式
【实例3-6】中的HTML代码
13
图3-11列偏移页面效果
《 Bootstrap 响应式网站开发 》
Boot st rap 栅格系统-- 栅格系统的常用方法
13
《 Bootstrap 响应式网站开发 》
13
案例：企业内容展示页面制作
3
13
《 Bootstrap 响应式网站开发 》
Boot st rap 栅格系统-- 案例：企业内容展示页面制作
案例展示
13
《 Bootstrap 响应式网站开发 》
Boot st rap 栅格系统-- 案例：企业内容展示页面制作
具体分为四步：
13
案例分析
《 Bootstrap 响应式网站开发 》
Boot st rap 栅格系统-- 案例：企业内容展示页面制作
案例实现
13
Boot st rap 栅格系统-- 案例：企业内容展
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3.1 将固定像素大小转换为弹性比例大小
• display:table/table-cell问题： • 表元必须包在表格中 • 不能把表元包到多行上
武汉传媒学院
3.2 Flexbox概述 • Flexbox:Flexible Box的缩写，意为”弹 性布局”，用来为盒状模型提供最大的灵 活性
浏览器 W3C规定 IE Chrome、Safari Firefox
武汉传媒学院
3.3 使用Flexbox
•Flexbox4个特性： •方向 •对齐 •次序 •弹性
武汉传媒学院
3.3 使用Flexbox • 垂直居中文本
例3-3
• display:flex:将当前元素设置成Flexbox • align-items:沿交叉轴对齐项目 • justify-content:沿主轴对齐
• align-items:内部元素都会生效 • align-self:对某一个元素生效
武汉传媒学院
3.3 使用Flexbox
• align-items/self： • flex-start：父元素顶部 • flex-end：父元素底部 • center：父元素中间 • baseline：项目的第一行文字的 基线对齐 • stretch：拉伸至与父元素一样大
• min-height: 100%;
武汉传媒学院
3.3 使用Flexbox
• 改变原始次序： • 传统方式; • 开头： display:table-caption • 第二位： display:table-header-group • 底部： display:table-footer-group
武汉传媒学院
3.3 使用Flexbox
• 垂直排列： • 将flex-direction设置成column • 将margin属性删除
• 垂直反序 • 将将flex-direction设置成columnreverse
武汉传媒学院
3.3 使用Flexbox
• 不同媒体查询中的不同Flexbox布局
• 行内伸缩
例3-6
• 将盒子元素设置成： display: inline-fFlexbox
• Flexbox的对齐 • 坐标轴
主轴
row column X Y
交叉轴
Y X
武汉传媒学院
flex-direction
3.3 使用Flexbox
• Flexbox可以嵌套 P46
<img srcset=”small.jpg 450w ,medium.jpg 900w” 450像素宽
sizes=”(min-width:17em) 100vw , (min-width:40em) 50vw” 100% src=”small.jpg”> 视口宽度
武汉传媒学院
3.4 响应式图片 • picture元素 <picture> <source media=”(media-width:30em)” srcset=”cake-table.jpg” <source media=”(meida-width:60em)” srcset=”cake-shop.jpg”> <img src=”scones.jpg”> </picture>
例3-5
• flex-direction: column;/*flexbox中设置垂直 布局*/ • @media (min-width: 31.25em) { .MenuWrap { flex-direction: row; } }/*大屏幕中采用行布局*/
武汉传媒学院
3.3 使用Flexbox
武汉传媒学院
3.4 响应式图片
•通过srcset切换分辨率
<img src=”small.jpg” srcset=”medium.jpg 1.5x , large.jpg 2x”>
2倍分辨率 宽度
1倍分辨率 宽度
1.5倍分辨率 宽度
武汉传媒学院
3.4 响应式图片
• srcset及sizes联合切换
• 项目默认沿主轴排列 • 单个项目占据的主轴空间叫做main size， 占据的交叉轴空间叫做cross size
武汉传媒学院
3.2 Flexbox概述
武汉传媒学院
3.2 Flexbox概述 • 浏览器对Flexbox的支持： • IE9以下不支持Flexbox • 跨浏览器使用需要加前缀
前缀 无 -ms-webkit-moz-
武汉传媒学院
3.3 使用Flexbox
• 改变原始次序：
例3-9
•order:序号
-1表示在所有 元素上方
武汉传媒学院
3.4 响应式图片
• 响应式图片固有问题： • 只有浏览器打开页面时才知道使用设 备情况 • 只有开发者知道有几种大小的图片 •目标：让浏览器知道有什么图片，让浏 览器根据情况进行选择
武汉传媒学院
武汉传媒学院
武汉传媒学院
3.3 使用Flexbox • justify-content： • flex-start（默认值）：左对齐 • flex-end：右对齐 • center： 居中 • space-between：两端对齐，项目之间的 间隔都相等。 • space-around：每个项目两侧的间隔相 等。所以，项目之间的间隔比项目与边 框的间隔大一倍。
元素
结果小数点 向右移2位
包含元素 的容器
武汉传媒学院
3.1 将固定像素大小转换为弹性比例大小
•放大效果
例3-1
•缩小效果
例3-2
武汉传媒学院
3.1 将固定像素大小转换为弹性比例大小 • display:inline-block问题： • 会在HTML元素间渲染空白 • 行内块中垂直居中 • 做不到让两个相邻元素一个宽度固定，另一个 填充剩余空间 • float的问题： • 浮动元素宽度设定成百分比时，不同平台上的 计算结果不一致 • 通常要清除浮动，才能避免父盒子子/元素折 叠
武汉传媒学院
3.3 使用Flexbox
• 偏移
例3-4
• .LastItem {
margin-left: auto;
}
使用所有可用的 左外边距
武汉传媒学院
3.3 使用Flexbox
• 反序： • 给弹性盒子CSS添加: flex-direction:row-reverse;
• 将最后一项元素的CSS改成: margin-right: auto;
武汉传媒学院
武汉传媒学院
3.3 使用Flexbox • flex属性：设计宽度 • flex-grow:伸展比例 • flex-shrink:缩小比例 • flex-basis:基准(像素/百分比/auto) 不伸缩情况 下的大小
例3-7
武汉传媒学院
3.3 使用Flexbox
• 粘附页脚
例3-8
武汉传媒学院
知识回顾
• 媒体查询：根据视口大小切换不同样式
• 如何实现“断点”间平滑过渡？？？
弹性布局
武汉传媒学院
目录
•将固定像素大小转换为 弹性比例大小 •Flexbox概述 •使用Flexbox •响应式图片
武汉传媒学院
3.1 将固定像素大小转换为弹性比例大小
• 弹性布局：网站宽度以百分比形式定义， 网页宽度随着屏幕窗口大小变化 • 固定布局：网站宽度是一个像素值 • 转换公式： 比例=目标/上下文
不支持picture浏览器 或没有合适媒体定义时的后备
武汉传媒学院
屏宽度幕在30em以上 使用的图片3.4 响应式图 片
3.4 响应式图片
• WebP图片格式
<picture> <source type=”image/webp” srcset=”pic.webp”> 指定
图片类型
<img src=”pic.jpg”> </picture>
• 任何容器都可以指定为Flex布局
• 采用Flex布局的元素，称为Flex容器（fle x container） • 它的所有子元素称为Flex项目（flex item ）
武汉传媒学院
3.2 Flexbox概述 • 容器默认存在两根轴： • 水平的主轴（main axis） • 垂直的交叉轴（cross axis）