Web前端开发案例教程 第2版 课件2.9 媒体查询

单元二新闻页制作—HTML5常用标签软件技术专业SoftwareTechnologyWeb前端设计与开发

常见的网页中主要包含图片、文字、超链接。这些内容均是使用HTML5标签实现，本单元开始学习HTML的各类标签，掌握网页设计中的相关元素。主要包括：2.1文本标签2.2列表标签2.3分隔线标签2.4图片标签2.5超链接标签2.6多媒体标签-Web页面音视频播放2.7标签类型2.8meta标签2.9媒体查询课程导学知识点实战举例课程导学单元总结学习目标1.知识目标（1）掌握并熟练应用HTML文本标签；（2）掌握并熟练应用列表标签；（3）掌握并熟练应用图片标签；（4）掌握并熟练应用超链接标签；（5）掌握并熟练应用多媒体标签；（6）掌握并熟练应用头部标签。2.能力目标（1）能熟练使用HTML文本标签、列表标签、图片标签、超链接标签、多媒体标签和头部标签搭建基本静态网页；（2）能使用HTML语言设计一个网页并运行。3.素质目标（1）具有质量意识、安全意识、工匠精神和创新思维；（2）具有集体意识和团队合作精神；（3）具有界面设计审美和人文素养；（4）熟悉软件开发流程和规范，具有良好的编程习惯。课程导学知识点实战举例课程导学单元总结2.9.1概述课程导学知识点实战举例2.9媒体查询单元总结

媒体查询（MediaQueries）是用于在网页设计中根据用户设备的特征（如屏幕宽度、高度、设备类型等）来应用不同的样式表规则的技术。它允许开发者根据用户设备的特性动态调整网页的布局和样式，以提供更好的用户体验。2.9.1媒体查询组成（1）媒体类型——Mediatypesmediatype（媒体类型）：指定CSS样式应用的设备或媒体类型。常见的媒体类型包括：all：所有设备print：打印预览模式screen：屏幕设备speech：语音合成器（2）媒体特性——Mediafeaturesmediafeature（媒体特性）：指定CSS样式根据设备或环境的不同特性而应用或不应用。媒体特性必须用小括号括起来，并且包含一个或多个表达式，例如设备的宽度或高度。常见的媒体特性包括：width：视口或设备的宽度height：视口或设备的高度orientation：设备方向（横向或纵向）aspect-ratio：视口或设备的宽高比device-widthanddevice-height：这两个特性用于描述设备的物理尺寸resolution：描述设备的分辨率2.9.1概述课程导学知识点实战举例2.9媒体查询单元总结（3）逻辑运算符——Logicaloperatorslogicaloperators（逻辑运算符）：使用的逻辑操作符包括and、not和only，它们允许开发者根据多个条件来定义CSS样式的应用规则。and操作符：用于组合多个媒体特性，要求同时满足所有条件时才应用样式。not操作符：用于指定一个不满足某个媒体特性时应用样式。only操作符：用于避免老旧浏览器不支持媒体查询时的问题。2.9.2媒体查询使用基本语法：@media媒体类型and(媒体特性){/*CSS规则*/}（1）在<link>标签中引用不同的样式表在HTML中使用<link>标签的media属性来加载不同的CSS样式表，以响应不同的设备或条件。例如：<!--默认样式表--><linkrel="stylesheet"href="styles.css"><!--当视口宽度小于等于600px时应用的样式表--><linkrel="stylesheet"media="screenand(max-width:600px)"href="styles-mobile.css"><!--当视口宽度大于600px时应用的样式表--><linkrel="stylesheet"media="screenand(min-width:601px)"href="styles-desktop.css">2.9.2媒体查询使用课程导学知识点实战举例2.9媒体查询单元总结（2）在CSS中使用媒体查询在单个HTML文件内部使用<style>标签时/在外部的CSS文件中/使用像Sass、Less等CSS预处理器时，通过媒体查询条件来定义不同的CSS规则。例如：1）根据屏幕宽度调整样式：<style>@mediascreenand(max-width:600px){/*CSSrulesformobiledevices*/body{font-size:14px;}}@mediascreenand(min-width:601px){/*CSSrulesfordesktopdevices*/body{font-size:16px;}}</style>2.9.2媒体查询使用课程导学知识点实战举例2.9媒体查询单元总结2）针对打印设备的样式：/*在打印设备上隐藏某些元素*/@mediaprint{.hide-on-print{display:none;}}3）多重条件的组合：/*当屏幕宽度在600px到900px之间，且设备支持颜色显示时应用这些样式*/@mediascreenand(min-width:600px)and(max-width:900px)and(min-color:256){body{background-color:lightblue;}}2.9.2媒体查询使用课程导学知识点实战举例2.9媒体查询单元总结注意事项：1）语法与结构：媒体查询必须以@media开头，后面跟着一个条件，如screen、print等，以及一个或多个媒体特性（如宽度、高度、颜色能力等）。2）顺序：CSS中的媒体查询按照书写顺序进行匹配，因此通常建议从最宽泛的条件开始，逐步向下细化，确保样式按照预期生效。3）响应式设计：媒体查询是实现响应式设计（ResponsiveWebDesign）的关键工具，能够帮助网页在各种设备上