下载文档原格式
HTML5⼊门教程：响应式页⾯布局摘⾃：随着互联⽹时代的发展，我们对⽹页布局有了新的要求，⼤⽓，美观，能够在不同的设备上呈现令⼈焕然⼀新的效果。
此时，⼀个全新的概念——响应式布局应运⽽⽣！它的诞⽣为我们的移动端布局带来了很⼤的便利，因此学习响应式页⾯布局势在必⾏！01响应式页⾯布局的概念响应式布局是Ethan Marcotte在2010年5⽉份提出的⼀个概念，简⽽⾔之，就是⼀个⽹站能够兼容多个终端——⽽不是为每个终端做⼀个特定的版本。
这个概念是为解决移动互联⽹浏览器⽽诞⽣的。
02响应式布局的优势响应式布局可以为不同终端的⽤户提供更加舒适的界⾯和更好的⽤户体验，⽽且随着⽬前⼤屏幕移动设备的普及，⽤“⼤势所趋”来形容也不为过。
随着越来越多的设计师采⽤这个技术，我们不仅看到很多的创新，还看到了⼀些成形的模式。
03响应式布局⽹站案例（如下图所⽰）：04弹性盒模型弹性盒布局模型是css3规范中提出的⼀种新的布局⽅式。
⽬的：提供⼀种更加⾼效的⽅式来对容器中的条⽬进⾏布局、对齐和分配空间。
优势：这种布局模式已被主流浏览器所⽀持，可以在web应⽤开发中使⽤。
说明：1.flex是display的⼀个属性值。
2.设置了display:flex属性的元素，称为Flex容器，他⾥⾯的所有⼦元素统称为容器成员，称为Flex项⽬。
后⾯我们就使⽤Flex容器和 Flex项⽬来进⾏介绍。
Flex容器有两根坐标轴：主轴（main axis）和交叉轴（cross axis）。
Flex容器属性flex-directionrow | row-reverse | column | column-reverse;flex-direction:row;flex-direction:row-reverse;flex-direction:column;flex-direction:column-reverse;justify-content定义了Flex项⽬在主轴⽅向上的对齐⽅式flex-start | flex-end | center | space-between | space-around;justify-content:flex-start;justify-content：flex-end;justify-content：flex-center;justify-content：space-between;justify-content：space-around;align-itemsflex-start | flex-end | center | baseline | stretch;定义项⽬在交叉轴上的对齐⽅式(适⽤于⽗类容器【弹性盒⼦】元素上)align-items：flex-start;align-items:flex-end;align-items:center;align-items:baseline;align-items:stretch;05媒体查询1.什么是媒体查询使⽤@media查询，你可以针对不同的媒体类型定义不同的样式。
Web前端开发实训案例教程初级前端响应式布局与弹性盒子使用Web前端开发实训案例教程初级前端响应式布局与弹性盒子使用在当今数字化时代，Web前端开发成为了一项备受追捧的技能。
随着移动设备的普及和多种屏幕尺寸的出现，响应式布局成为了不可或缺的前端开发技术。
本教程将以Web前端开发实训案例的形式，介绍初级前端响应式布局与弹性盒子的使用，帮助读者初步掌握这些重要的技能。
案例一：响应式布局响应式布局是指网页能够根据用户使用的设备和屏幕尺寸做出相应的布局调整，以适应不同的终端设备，提供更好的用户体验。
在实践中，我们常使用媒体查询（Media Queries）来实现响应式布局。
媒体查询是CSS3的一个强大特性，它允许我们根据设备的特性，如屏幕宽度、高度、分辨率等，来应用不同的CSS样式。
使用媒体查询的基本语法如下：```@media mediatype and|not|only (media feature) {CSS rules;}```其中，mediatype是指媒体类型，如screen、print等；media feature 是指媒体特性，如width、height等。
接下来，我们以一个网页导航栏为例，演示如何实现响应式布局。
```html<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 响应式布局 */@media screen and (max-width: 600px) {.nav {flex-direction: column;}}/* 导航栏样式 */.nav {display: flex;justify-content: space-between;}</style></head><body><div class="nav"><a href="#">首页</a><a href="#">产品</a><a href="#">关于</a><a href="#">联系我们</a></div></body></html>```在上述代码中，我们首先使用`@media screen and (max-width: 600px)`来设置当屏幕宽度小于等于600px时，导航栏的布局变为垂直排列。
详解网页设计中的响应式布局技巧响应式布局技巧是现代网页设计中非常重要的一部分，它能够使得网页在不同设备上都能够正常显示和良好的用户体验。
本文将详解网页设计中的响应式布局技巧，包括多个方面的内容。
第一章：响应式设计简介响应式设计是一种可以根据用户的设备和屏幕尺寸重新调整布局和元素的设计方法，它能够提供更好的用户体验和增强网页的可访问性。
响应式设计的实现离不开HTML5和CSS3等技术的支持，通过媒体查询、弹性布局和流体网格等技术来实现。
第二章：媒体查询的使用媒体查询是响应式设计中最常用的技术之一，它能够根据设备的特性和屏幕尺寸调整网页的布局。
媒体查询使用CSS的@media规则来实现，通过设置不同的CSS样式，针对不同的屏幕尺寸提供不同的布局。
例如，可以设置网页在大屏幕上显示为三栏布局，在小屏幕上显示为单栏布局。
第三章：弹性布局的应用弹性布局是一种能够根据屏幕尺寸自动调整元素大小和位置的布局方式。
通过使用CSS的弹性盒子模型（Flexbox），可以在不同的设备上实现自适应的布局。
弹性布局具有灵活性和可扩展性，在不同屏幕大小下能够保持良好的布局效果。
第四章：流体网格的运用流体网格是一种将网页布局划分为等宽的列和行的方法，通过使用百分比单位来设置列的宽度，从而实现网页在不同屏幕尺寸下的自适应。
流体网格能够在不同设备上平衡布局，使得网页内容能够自然地适应不同的屏幕尺寸，提升用户体验。
第五章：图片和媒体的适应性在响应式布局中，图片和媒体的适应性也是非常重要的一部分。
通过使用CSS的max-width属性和媒体查询，可以使得图片和媒体在不同屏幕尺寸下自动调整大小，并保持良好的显示效果。
此外，可以使用图片压缩和延迟加载等技术来优化图片的加载速度和性能。
第六章：导航和菜单的设计网页的导航和菜单是用户浏览网页内容的重要入口，而在响应式布局中，如何设计适应不同屏幕尺寸的导航和菜单也是一个需要考虑的问题。
可以使用折叠菜单、下拉菜单等方式来优化导航和菜单的显示效果，在小屏幕上提供更好的用户操作体验。
如何使用Dreamweaver进行网站响应式布局第一章：Dreamweaver简介及基础知识Dreamweaver是一款专业的网页设计与开发软件，由Adobe公司开发。
它提供了直观的界面和功能丰富的工具，使得网站的设计和布局更加简单高效。
在使用Dreamweaver进行网站响应式布局前，首先需要掌握一些基础知识。
1.1 Dreamweaver界面简介Dreamweaver的界面分为四个主要部分：菜单栏、工具栏、主面板和标签栏。
菜单栏提供了各种功能选项，包括文件操作、页面布局、代码编辑等。
工具栏上的图标提供了快速访问常用工具的方式，如选择工具、文本编辑工具、图像处理工具等。
主面板是Dreamweaver的核心区域，可以进行页面的设计、布局和编辑。
标签栏用于切换不同视图模式，包括代码视图、设计视图和分割视图。
1.2 HTML基础知识网页的布局和设计离不开HTML(HyperText Markup Language)。
HTML是一种标记语言，用于描述网页结构和内容的语法规则。
常用的HTML标签有<title>、<head>、<body>、<div>、<p>、<h1>等。
通过正确使用这些标签，可以实现网页的分段、标题、段落等布局。
1.3 CSS基础知识CSS (Cascading Style Sheets)是一种样式表语言，用于定义网页的外观和样式。
通过定义CSS样式表，可以设置网页元素的字体、颜色、背景、边框等属性。
CSS样式表可以内部定义在HTML文件内，也可以外部引用。
第二章：网页响应式布局概述及原理响应式布局是一种使网站在不同设备上自适应的布局方式，能够根据屏幕大小和分辨率对网页进行优化显示。
2.1 响应式布局的优势响应式布局可以提供良好的用户体验，无论用户使用何种设备访问网站，都能够获得合适的布局和易于浏览的内容。
同时，响应式布局还有助于提高网站的跨平台兼容性和SEO(Search Engine Optimization)优化。
Dreamweaver中设计响应式网页布局的教程第一章：Dreamweaver简介Dreamweaver是一款功能强大的网页设计工具，由Adobe公司开发和维护。
它提供了丰富的设计工具和功能，以帮助开发人员创建现代、响应式的网页布局。
本章将介绍Dreamweaver的基本特点和界面布局。
1.1 Dreamweaver的主要特点- 代码和设计视图：Dreamweaver提供了代码视图和设计视图，使开发人员可以方便地切换和编辑网页的HTML、CSS和JavaScript代码。
- 响应式设计工具：Dreamweaver内置了响应式网页设计工具，可以根据不同的屏幕尺寸和设备类型，自动调整网页布局。
- 预览和调试：Dreamweaver可以实时预览网页，在设计过程中即时查看网页在不同设备上的呈现效果。
- 模板和库：Dreamweaver提供了丰富的网页模板和库，开发人员可以基于这些模板快速构建网页。
1.2 Dreamweaver的界面布局Dreamweaver的界面布局由多个面板组成，每个面板都有特定的功能和工具。
以下是Dreamweaver的主要面板和它们的功能：- 文件管理器面板：用于管理网页项目的文件和文件夹。
- 代码编辑面板：用于编辑和查看网页的HTML、CSS和JavaScript代码。
- 样式面板：用于编辑和管理网页的样式表。
- 响应式设计面板：用于设置和调整网页的响应式布局。
- 属性面板：用于编辑和查看网页元素的属性。
- 图像和多媒体面板：用于管理和插入图像、音频和视频等多媒体元素。
- 预览面板：用于实时预览网页在不同屏幕尺寸和设备上的呈现效果。
第二章：创建响应式网页布局本章将介绍如何在Dreamweaver中创建响应式网页布局。
2.1 创建新网页项目首先，打开Dreamweaver并点击“文件”菜单中的“新建”选项。
在弹出的对话框中，选择“空白网页”并设置网页的标题和目标文件夹。
点击“创建”按钮创建新的网页项目。
响应式布局是什么如何实现响应式布局实现响应式布局有多种方法，下面将介绍一些常见的实现方式：例如，可以使用媒体查询在小屏幕上隐藏一些元素或调整布局的排列方式。
以下是一个示例：```/* 设置在屏幕宽度小于768px时的样式 */.headerdisplay: none;}.sidebarwidth: 100%;}```2. 弹性网格布局（Flexible Grid Layout）：弹性网格布局是一种基于CSS的布局技术，它使用百分比或相对单位而不是固定像素单位来定义网格的列宽和行高。
通过设置相应的百分比值，网格中的列和行可以自动调整大小以适应不同的屏幕尺寸。
弹性网格布局可以使用CSS的`display: grid`属性或`flexbox`模型来实现。
这些布局技术允许开发者定义网格中的列数和每一列的宽度，并且可以自动调整布局以适应不同屏幕大小。
3. 图像和媒体查询：在响应式布局中，图像是常见的需要适应不同屏幕尺寸的元素之一、通过使用CSS的`max-width`属性，可以确保图像在小屏幕上不会超出其容器的大小，并且可以根据需要自动调整图像的宽度和高度。
这可以提高网页加载速度并节省带宽。
另外，可以通过媒体查询来为不同屏幕尺寸提供不同的图像。
例如，在大屏幕上加载高质量的图像，在小屏幕上加载低分辨率的图像，以减少加载时间和带宽的消耗。
4.响应式导航栏：导航栏在网站上起到了重要的导向和导航作用，而在小屏幕上，传统的导航栏常常会因为空间不足而难以使用。
为了解决这个问题，可以使用响应式导航栏来提供更好的用户体验。
响应式导航栏通常在小屏幕上使用菜单按钮来展开和收起导航栏。
可以使用CSS的媒体查询和JavaScript来实现这一效果。
在小屏幕上，导航栏会以垂直列表的形式显示，用户点击菜单按钮后，导航栏会展开并显示链接列表，用户点击链接后，导航栏会重新收起。
总结起来，响应式布局是一种使网站或应用程序能够适应不同屏幕大小和设备的布局技术。
通过Dreamweaver实现响应式网页的自适应布局章节一：什么是响应式网页设计响应式网页设计是一种技术方法，可以使网页在不同设备上展示不同的布局和样式，以适应不同屏幕尺寸的设备。
它的目标是为了提供更好的用户体验，无论用户是在电脑、平板或手机上访问网页，都可以获得良好的浏览效果。
章节二：为什么需要响应式网页设计随着移动设备的普及和互联网的发展，越来越多的用户使用手机和平板电脑浏览网页。
传统的固定布局网页无法适应不同屏幕尺寸的设备，导致用户体验不佳，甚至无法正常浏览内容。
而响应式网页设计可以解决这个问题，使网页根据设备自动调整布局和样式，提供更好的用户体验。
章节三：使用Dreamweaver创建响应式网页Dreamweaver是一款流行的网页设计软件，提供了丰富的工具和功能，方便设计师创建响应式网页。
下面介绍一些实现自适应布局的常用技巧。
1. 使用媒体查询（Media Queries）媒体查询是CSS3的一个功能，可以根据设备的特性来应用不同的样式。
在Dreamweaver中，可以通过CSS样式面板轻松地创建媒体查询规则，并针对不同屏幕尺寸设置不同的样式。
例如，可以为手机屏幕设置较小的字体和单列布局，为平板和电脑屏幕设置较大的字体和多列布局。
2. 使用响应式布局Dreamweaver提供了一些现成的响应式布局模板，可以直接使用或修改。
这些模板已经针对不同的屏幕尺寸进行了优化，可以作为起点，快速创建响应式网页。
在Dreamweaver的“文件”菜单中选择“新建”->“响应式布局”即可看到这些模板。
3. 使用Bootstrap框架Bootstrap是一个流行的前端开发框架，提供了大量的CSS样式和JavaScript组件，可以轻松地创建响应式网页。
Dreamweaver集成了Bootstrap插件，可以方便地使用Bootstrap的组件和布局。
章节四：实例演示为了更好地理解如何使用Dreamweaver创建响应式网页的自适应布局，我们将以一个简单的网页作为示例。
响应式网站如何布局响应式〔制定〕在面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题，可兼容多个智能移动浏览终端，并自动适应其屏幕尺寸。
那么响应式网站如何布局呢？响应式网站布局问题一、响应式的实现原理与技术点什么1、Meta标签定义：位于文档的头部，不包涵任何内容，meta 标签是对网站发展非常重要的标签，它可以用于鉴别，设定页面格式，标注内容提要和关键字，以及刷新页面等等，它回应给浏览器一些有用的信息，以帮助正确和准确地显示网页内容。
2、使用Media query(媒介查询)适配对应样式：通过不同的媒介类型和条件定义样式表规则，获取的值可以设置设备的手持方向，水平还是垂直orientation(portrait|lanscape)，设备的分辨率resolution等;语法结构及用法：@media 设备名 only (选取条件) not (选取条件) and(设备选取条件)。
3、表格(table)的响应式处理：table会随着网页或设备的变化而自动改变，利用tr(行列)、td(竖列)，也可使用colspan(水平合并)、rowspan(垂直合并)完成页面布局，实现响应式制定。
4、第三方框架bootstrap：引用bootstrap插件，更快捷的实现网页的响应式制定，如果大家还想深入学习，可以点击这里进行学习，Bootstrap学习教程 Bootstrap实战教程。
二、移动端响应式页面的实现目前一般常见的实现响应式有两种方法，一种是利用媒体查询，另外一种是bootstrap下的栅格布局，以后介绍bootstrap的时候来介绍栅格布局，这里主要来说一下如何利用媒体查询实现响应式布局。
媒体查询，即 @media 查询，媒体查询可以针对不同的屏幕尺寸设置不同的样式，特别是如果你必须要制定响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会依据浏览器的宽度和高度重新渲染页面。
响应式中使用布局容器来实现控制页面中每个元素的小和布局变化，需要一个父级元素作为布局容器，来配合子级元素实现变化。
其原理，在不同屏幕下，通过媒体查询来改变这个布局容器的小，然后改变里面的子元素的排列和小，从而实现不同屏幕下，页面布局和样式发生变化。
在Web发中，常见的响应式布局容器尺寸划分如表1所示。
表1响应式布局容器尺寸划分设备划分尺寸区间宽度设置超小设备（）<576px平板≥576px540px桌面显示器≥768px720px桌面显示器≥992px960px超桌面显示器≥1200px1140px接下来通过案例演示如何使用媒体查询，来根据常见屏幕尺寸进行宽度设置，实现响应式页面布局。
具体如例4-1所示。
【例4-1】（1）创建C:\web\chapter04\demo03.html文件，具体代码如下。
<head><metaname="viewport"content="width=device-width"><style>/*1.超小设备（小于576px）布局容器的宽度为*/@mediascreenand(max-width:575px){.container{width:;}}/*2.平板设备（于等于576px）布局容器的宽度为540px*/@mediascreenand(min-width:576px){.container{width:540px;}}/*3.桌面显示器（于等于768px）布局容器宽度为720px*/ @mediascreenand(min-width:768px){.container{width:720px;}}/*4.桌面显示器（于等于992px）布局容器宽度为960px*/ @mediascreenand(min-width:992px){.container{width:960px;}}/*5.超桌面显示器（于等于1200）布局容器宽度为1140*/ @mediascreenand(min-width:1200px){.container{width:1140px;}}.container{height:50px;background:#d;margin:0auto;}</style></head><body><divclass="container">布局容器</div></body></html>上述代码中，设置了一个类名为container的div布局容器，并使用媒体查询的在不同屏幕尺寸下对布局容器的宽度进行设置。
Media Query 的使用方法通过不同的媒体类型和条件定义样式表规则，媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。
媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。
如：width会有min-width 和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。
通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。
媒体查询能够获取的值如下：•设备的宽和高device-width，device-heigth显示屏幕/触觉设备。
•渲染窗口的宽和高width，heigth显示屏幕/触觉设备。
•设备的手持方向，横向还是竖向orientation(portrait|lanscape)和打印机等。
•画面比例aspect-ratio点阵打印机等。
•设备比例device-aspect-ratio-点阵打印机等。
•对象颜色或颜色列表color，color-index显示屏幕。
•设备的分辨率resolution。
语法结构及用法媒体查询有两种使用方式，一种是在CSS样式中内嵌“@media”，在同一个CSS中通过不同窗口编写不同的样式去选择。
另一种是使用外部样式表的引用，在@import和link中使用“@media”，根据不同的窗口大小选择对应的样式文件。
这两种方式的使用方法是一样的。
Media Queries的使用方法如下所示：@media 设备类型 only (选取条件) not (选取条件) and (设备特性)，设备二 { 样式代码 }在CSS3中的Media Queries模块中支持对外部样式表的引用，使用方法类型如下代码：@import url(color.css) screen and (min-width: 1000px);或：<link rel="stylesheet" type="text/css" media="only screen and (max-width:480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" /> /*使用link导入外部css文件*/简写：<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px) href="link.css" />上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。
在样式表中内嵌@media的代码示例如下所示：@media (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), (max-device-width:480px) and (orientation:landscape), (min-device-width:480px) and (max-device-width:1024px) and(orientation:portrait) { 样式代码 }简写：@media screen and (max-width:640px) { 样式代码 }在上面的示例代码中，设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px及其以下手持设备；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。
从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内，样式代码为兼容设置的样式表，包含在中括号里面。
only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了css基本语法。
可用的设备类型在CSS中嵌入“@media”的方式，开头必须书写“@media”,然后指定设备类型（上例使用screen代表电脑显示器）。
CSS中定义了10种设备类型可以指定的值设置类型all所有设备braille盲文，即盲人用点字法触觉回馈设备embossed盲文打印机handheld手持的便携设备print文档打印用纸或打印预览视图模式projection各种投影设备screen彩色电脑显示器屏幕speech语言和音频合成器tty固定字母间距的网格的媒体，比如电传打字机和终端tv电视机类型的设备可用的设备特性参数通过设备类型可以区分使用的设备，再通过设备特性参数来设置同一设备的不同型号。
例如，通过设备类型指定电脑显示器，再通过设备特性参数指用多大屏幕的显示器。
设备特性的书写方式与样式的书写方式很相似，分为两个部分，当中由冒号分割，冒号前书写设备的某种特性，冒号后书写该特性的具体值。
例如“(min-width:320px)”。
CSS中的设置特性共有13种，是一个类似于CSS属性的集合。
但与CSS属性不同的是，大部分设备特性的指定接受min/max的前缀，用来表示大于等于或小于等于的逻辑，以此避免使用“<”和“>”这些字符。
对于这13种设备特性参数的说明如表特性可指定值可用媒体类型是否接受min/max前缀特性说明width带单位的长度值例如：640px 视觉屏幕/触摸设备允许定义输出设备中的页面可见区域宽度(单位一般为px)，即浏览器窗口的宽度heigth带单位的长度值例如：320px 视觉屏幕/触摸设备允许定义输出设备中的页面可见区域高度(单位一般为px)，即浏览器窗口的高度device-width带单位的长度值例如：640px 视觉屏幕/触摸设备允许定义输出设备的屏幕可见宽度(单位一般为px)，即设备屏幕分辨率的宽度值device-heigth带单位的长度值例如：320px 视觉屏幕/触摸设备允许定义输出设备的屏幕可见高度(单位一般为px) ，即设备屏幕分辨率的高度值orientation只能指定两个值：portrait 或 landscape位图介质类型不允许浏览器窗口的方向是纵向还是横向，当窗口商度大于等于宽度值是该特性值为portait（横向），否则为landscape（竖向）aspect-ratio比例值例如16/9位图介质类型允许定义’width’与’height’的比率，即浏览器的长宽比device-aspect-ratio比例值例如16/9位图介质类型允许定义’device-width’与’device-height’的比率，即设备屏幕长宽比。
如常见的显示器比率：4/3， 16/9，16/10color整数值视觉媒体允许设备使用多少位的颜色值，如果不是彩色设备，则值等于0color-index整数值视觉媒体允许色彩表中的色彩数monochrome整数值视觉媒体允许定义在一个单色框架缓冲区中每像素包含的单色原件个数。
如果不是单色设备，则值等于0resolution分辨率值例如300dpi位图介质类型允许定义设备的分辨率。
如：96dpi，300dpi，118dpcmscan只能指定两个值：progressive 或interlace电视类不允许定义电视类设备的扫描方式， progressive逐行扫描，interlace隔行扫描grid只能指定两个值：0 或1栅格设备不允许用来查询输出设备是否使用栅格或基于位图。
1代表是，0代表否可以使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式，例如以下语句指定了当设备窗口宽度小于640px时所使用的样式：@media screen and (max-width: 640px) { 样式代码 }可以使用多条语句来将同一个样式应用于不同的设备类型和设备特性中，指定方式类似如下所示：@media handheld and (min-width:360px), screen and (max-width: 480px) { 样式代码 }可以在表达式中加上not关键字或only关键字， not关键字表示对后面的表达式执行取反操作，书写方法类似如下所示：/* 样式代码将被使用在除便携设备之外的其他设备或非彩色便携设备中 */@media not handheld and (color) { 样式代码 }/* 样式代码将被使用在非彩色设备中 */@media all and (not color) { 样式代码 }使用only关键字的作用是让那些不支持Media Queries但是能够读取Media Type的设备的浏览器将表达式的样式隐藏起来。
例如：@media only screen and (color) { 样式代码 }上面的语句对于支持Media Queries的设备来说，将能够正确应用样式，就像only不存在一样。
对于不支持Media Queries但能够读取Media Type的设备（例如IE8只支持“@media screen”）来说，由于先读到的是only而不是screen, 将忽略这个样式。
对于不支持Media Queries 的浏览器（例如IE8之前的浏览器）来说，无论是否有only, 都将忽略这个样式。
