网页设计与制作 课件 26 实现响应式背景切换（媒体查询）.pptxVIP

;入门测

作业分析

知识回顾

flex容器样式属性

display:flex;

justify-content:space-between;

flex-wrap:wrap;

align-items:center

flex项目样式属性

flex:1;或者flex:none;

;在此之前，本教材中所涉及的案例及任务都是基于桌面端进行开发，当使用手机查看桌面端网页时，会看到页面字体过小，甚至内容错乱，体验非常糟糕。为了使网站在不同尺寸的设备中都能有很好的用户体验，通常采用响应式的网页设计。

本任务学习响应式网页设计的相关概念和技术方法，实现响应式背景切换。;学习内容;响应式网页是指能够根据不同设备的屏幕尺寸和分辨率，以及用户的浏览器窗口大小，自动选择定义好的一套样式方案，以提供最佳的用户体验。

响应式设计的核心包括流式布局（FluidGridLayout）、媒体查询（MediaQuery）等技术。

流式布局，就是百分比布局，使用百分比单位而不是固定像素来定义元素的尺寸，使页面布局能够根据屏幕尺寸进行调整。

媒体查询，是指根据不同的屏幕尺寸应用不同的样式规则，进一步提升了网站的适应性和用户体验。;在一些主流的浏览器的“开发者工具”中都提供了设备模拟器

第一步，使用Chrome浏览器打开想要检查的网页。

第二步，调出开发者工具，可按下F12键调出，或右键点击