`
zhanying
  • 浏览: 8753 次
社区版块
存档分类
最新评论

CSS基础教程——多媒体查询

 
阅读更多
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:CSS基础教程 —— 多媒体查询
CSS3 多媒体查询
CSS2 多媒体类型
@media 规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则。
例如:你可以针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则。
但是这些多媒体类型在很多设备上支持还不够友好。
CSS3 多媒体查询
CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示。
媒体查询可用于检测很多事情,例如:
viewport(视窗) 的宽度与高度
设备的宽度与高度
朝向 (智能手机横屏,竖屏) 。
分辨率
目前很多针对苹果手机,Android 手机,平板等设备都会使用到多媒体查询。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器的版本号。
属性
@media 21.0 9.0 3.5 4.0 9.0
多媒体查询语法
多媒体查询由多种媒体组成,可以包含一个或多个表达式,表达式根据条件是否成立返回 true 或 false。
@media not|only mediatype and (expressions) {
    CSS-Code;
}
如果指定的多媒体类型匹配设备类型则查询结果返回 true,文档会在匹配的设备上显示指定样式效果。
除非你使用了 not 或 only 操作符,否则所有的样式会适应在所有设备上显示效果。
not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)。
only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。
all: 所有设备,这个应该经常看到。
你也可以在不同的媒体上使用不同的样式文件:

CSS3 多媒体类型
值 描述
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕,平板,智能手机等。
speech 用于屏幕阅读器
多媒体查询简单实例
使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。
以下实例中在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色:
实例
@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

以下实例在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧:
实例
@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}
分享到:
评论

相关推荐

    HTML5与CSS3基础教程 第八版 中文版 高清 PDF

    《HTML5与CSS3基础教程 第八版 中文版》是一本全面介绍这两个技术的书籍,旨在帮助初学者快速入门,并提供给进阶者深入理解的资源。 HTML5是超文本标记语言(HyperText Markup Language)的第五个版本,它的出现极...

    JSP网络编程——多媒体(1——3)

    "JSP网络编程——多媒体(1——3)"这一主题,显然关注的是如何利用JSP技术处理和展示多媒体内容,如图像、音频、视频等。下面我们将深入探讨这个主题,了解相关知识点。 1. **JSP基本概念**: JSP是由Sun ...

    《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf

    根据提供的文件内容,我们可以整理出以下Web前端设计基础的知识点: 1. HTML5、CSS3、JavaScript概述 - HTML5是最新版本的超文本标记语言,用于创建网页的标准标记语言。它具有更快的访问速度、更好的搜索引擎优化...

    HTML5+CSS3 Web前端设计基础教程-PPT.rar

    这篇教程——"HTML5+CSS3 Web前端设计基础教程-PPT",显然是一个旨在帮助初学者和进阶者理解这两种语言基本概念和实践应用的资源。 HTML5(超文本标记语言第五版)是网页内容的结构化标准,它增强了对多媒体的支持...

    网页设计与开发——HTML、CSS、JavaScript实例教程

    CSS3新增了许多功能,如媒体查询(@media rule)实现响应式设计,过渡(transition)和动画(animation)增强用户体验,以及格栅系统(grid system)和Flexbox布局模型,使复杂布局变得更为简单。 JavaScript是一种...

    HTML5+CSS3+JS入门教程 + 源代码 pdf

    比如,你可以使用媒体查询(@media)来实现不同设备或屏幕尺寸下的样式调整,实现移动优先的响应式设计。CSS3还支持阴影、渐变、圆角等效果,让网页视觉表现更丰富。 JavaScript是一种强大的客户端脚本语言,广泛...

    HTML5与CSS3基础教程(第8版)中文高清PDF切白边

    本教程《HTML5与CSS3基础教程(第8版)》是针对这两个技术的最新更新,提供了全面且深入的学习资源。以下是该教程可能涵盖的一些核心知识点: 1. **HTML5简介**:HTML5是超文本标记语言的最新标准,它增强了语义化...

    Web前端开发项目教程(HTML5+CSS3+JavaScript)全册习题参考答案.pdf

    Web前端开发是构建互联网应用程序...以上知识点构成了Web前端开发的基础,掌握这些技能能帮助开发者创建功能丰富、视觉吸引力强的网页。通过练习和项目实践,开发者可以不断提升技术水平,适应不断变化的Web开发环境。

    Web前端开发案例教程(HTML5+CSS3)(微课版)_PPT课件.zip

    《Web前端开发案例教程(HTML5+CSS3)(微课版)》是一份全面介绍Web前端开发技术的教育资料,特别关注HTML5和CSS3的应用。这份PPT课件旨在帮助初学者和有一定基础的学习者掌握现代网页设计与开发的核心技能。HTML5...

    一个简单的HTML网页——传统节日春节网页(HTML+CSS)

    根据给定文件的信息,我们可以提炼出以下几个主要的知识点: ### 1. HTML5与CSS3在网页设计中的应用 ...通过对上述知识点的学习和实践,学生不仅可以完成期末考核项目,还能为未来的职业发展打下坚实的基础。

    HTML语言学习教程——HTML语言剖析[参照].pdf

    11. **多媒体标记** HTML5引入了`<audio>`和`<video>`标签,支持音频和视频的嵌入,通过`src`属性指定媒体文件路径,`controls`属性添加播放控件。 12. **其他标记** 包括`<hr>`(水平线)、`<pre>`(预格式化...

    《网页设计与制作项目教程(HTML+CSS+JavaScript)》-配套源码.zip

    《网页设计与制作项目教程(HTML+CSS+JavaScript)》是一部综合性的教程,旨在帮助学习者深入理解和掌握网页设计的核心技术。本教程结合了HTML、CSS和JavaScript这三种关键技术,它们是构建现代网页的基石。 HTML...

    从入门到精通HTML5——PDF——网盘链接

     10.3.1 添加多媒体文件标记——embed 213  10.3.2 设置自动运行——autostart 214  10.3.3 设置媒体文件的循环播放——loop 215  10.3.4 隐藏面板——hidden 216  10.3.5 添加其他类型的媒体文件 217  10.4 ...

    网页设计与制作——Dreamweaver CS6标准教程(第二版)案例素材.zip

    这些素材包括图像、文本、音频、视频等多媒体元素,以及HTML代码、CSS样式表等基础元素,使得学习者能够按照书中步骤一步步构建出真实的网页项目。 在网页设计领域,了解和熟练运用Dreamweaver CS6的关键功能至关...

    html5和css3 教程整理并附stunning css3 源码.part1

    本教程整理包含两本重要的参考书籍——《HTML.5与CSS.3权威指南》和《HTML5.and.CSS3.》,以及一份名为“stunningCSS3_code”的源码集合,旨在帮助学习者深入理解和应用这两个技术。 HTML5是超文本标记语言(HTML)...

    毕设&课设&项目&实训-一个简单网页设计,主题是前端技术基础教程,HTML+CSS.zip

    在这个前端技术基础教程中,你可能接触到以下几个关键概念: 1. **HTML5新特性**:HTML5引入了许多新的标签,如`<header>`、`<footer>`、`<nav>`、`<article>`等,使得语义化更明确,同时也增强了多媒体支持,如`...

    网页设计必备——html初级教程

    这个"网页设计必备——html初级教程"包含两个CHM文件:HTML入门与提高.CHM和HTML基础教程.chm,它们将帮助初学者理解并掌握HTML的基本概念和语法。 HTML入门与提高.CHM可能涵盖以下内容: 1. HTML简介:解释HTML的...

    网页制作基础教程(Dreamweaver CS3).word

    1、制作我的第一页 2、制作网页冷酷青春 3、制作我的家园框架集网页 ...案例09使用CSS样式格式化页面——青岛教育在线网 案例10应用模板制作相似网页-美文随笔 案例11嵌入表单元素 案例12表格布局页面

    ASP毕业设计——ASP多媒体课程答疑系统(源代码+论文).zip

    - `admin_uploadlist.asp`:可能显示已上传的文件列表,例如多媒体资源,如视频教程、课件等。 3. **技术栈**: 在这个项目中,除了ASP,还可能用到以下技术: - 数据库:如Access或SQL Server,用于存储用户...

Global site tag (gtag.js) - Google Analytics