一、下载jquery.mediaqueries.js，将其存放在以下目录（eclipse下的一个web project目录）
二、编写css
1.default.css
@CHARSET "UTF-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
background: #666666;
margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 */
padding: 0;
text-align: left; /* 在 IE 5* 浏览器中，这会将容器居中。文本随后将在 #container 选择器中设置为默认左对齐 */
color: #000000;
}
.oneColFixCtr #container {
width: 480px; /* 使用比最大宽度 (800px) 小 20px 的宽度可显示浏览器界面元素，并避免出现水平滚动条 */
background: #FFFFFF;
margin: 0 auto; /* 自动边距（与宽度一起）会将页面居中 */
border: 1px solid #000000;
text-align: left; /* 这将覆盖 body 元素上的“text-align: center”。 */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* 请记住，填充是 div 方块内部的空间，边距则是 div 方块外部的空间 */
}
2.wider.css
@CHARSET "UTF-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
background: #E6E6FA;
margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 */
padding: 0;
text-align: left; /* 在 IE 5* 浏览器中，这会将容器居中。文本随后将在 #container 选择器中设置为默认左对齐 */
color: #000000;
}
.oneColFixCtr #container {
width: 480px; /* 使用比最大宽度 (800px) 小 20px 的宽度可显示浏览器界面元素，并避免出现水平滚动条 */
background: #FFFFFF;
margin: 0 auto; /* 自动边距（与宽度一起）会将页面居中 */
border: 1px solid #000000;
text-align: left; /* 这将覆盖 body 元素上的“text-align: center”。 */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* 请记住，填充是 div 方块内部的空间，边距则是 div 方块外部的空间 */
}
3.handheld-iphone.css
@CHARSET "UTF-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
background: #E6E6FA;
margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 */
padding: 0;
text-align: left; /* 在 IE 5* 浏览器中，这会将容器居中。文本随后将在 #container 选择器中设置为默认左对齐 */
color: #000000;
}
.oneColFixCtr #container {
width: 480px; /* 使用比最大宽度 (800px) 小 20px 的宽度可显示浏览器界面元素，并避免出现水平滚动条 */
background: #FFFFFF;
margin: 0 auto; /* 自动边距（与宽度一起）会将页面居中 */
border: 1px solid #000000;
text-align: left; /* 这将覆盖 body 元素上的“text-align: center”。 */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* 请记住，填充是 div 方块内部的空间，边距则是 div 方块外部的空间 */
}
三、编写html或jsp
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width" />
</head>
<body>
<link rel="stylesheet" href="./css/default.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="./css/wider.css" media="only screen and (min-width: 1200px)" />
<link rel="stylesheet" type="text/css" href="./css/handheld-iphone.css"
media="only screen and (max-device-width: 480px), handheld" />
<script src="js/jquery.mediaqueries.js" type="text/javascript"></script>
</body>
请注意红色字体所在部分，及写法
附上相关文件
- 大小: 15.3 KB
分享到：
相关推荐
### 使用CSS3 Media Queries创建手机版网站 随着手持设备如智能手机和平板电脑的快速发展，网站适应各种屏幕尺寸变得尤为重要。CSS3 Media Queries作为一种强大的工具，帮助设计师和开发者针对不同类型的设备定制化...
这些HTML文件可能包含了更多关于Media Queries的实例、自适应布局的代码演示以及可能的示例解析，读者可以通过查看这些文件深入了解相关知识。在实际开发中，熟练掌握Media Queries和自适应布局技巧，将有助于创建更...
CSS媒体查询（Media Queries）是CSS中用于定义不同设备或屏幕环境下样式规则的关键技术。它允许开发者根据设备特性，如屏幕尺寸、分辨率、颜色深度等，动态调整网页的布局和样式，实现响应式设计。 在CSS2中，媒体...
CSS3中的Media Queries（媒体查询）是前端开发中用于实现响应式网页设计的...需要注意的是，随着现代浏览器的普及和老旧浏览器逐渐退出市场，越来越多的开发者会倾向于使用原生的Media Queries，而不是采取兼容性措施。
Media Queries主要使用的关键字包括`and`、`not`和`only`。其中`and`用来连接多个媒体特性，`not`用来排除符合某种条件的媒体类型，而`only`则用于排除那些不支持Media Queries的浏览器。这些关键字搭配媒体类型和...
通过使用Media Queries，可以检测设备的特征，如屏幕分辨率、屏幕宽度、高度等，并根据这些信息加载相应的CSS规则，从而让网页在不同的设备上呈现出最佳的布局和设计。 首先，CSS3中引入的媒体属性大多支持前缀...
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会...
以下是一些使用媒体查询的例子： 1. 当视口宽度大于或等于800px时，应用样式： ```css @media screen and (min-width: 800px) { /* 样式代码 */ } ``` 2. 当视口宽度在600px到800px之间时，应用样式： ```css ...
本文将详细介绍如何通过CSS媒体查询（Media Queries）和JavaScript相结合的方式来判断浏览器设备类型。 首先，CSS媒体查询是CSS3中的一项功能，允许内容根据设备特性，如视口宽度、设备像素比等进行适配。在本文中...
本篇文章将深入探讨如何使用CSS3媒体查询（Media Queries）和jQuery来实现一个响应式导航，特别是在屏幕宽度变化时，导航栏会进行相应的布局调整。 首先，我们了解CSS3媒体查询（Media Queries）的概念。媒体查询是...
在"exo4_media_queries-main"这个文件中，我们可能看到的是一系列示例或练习，演示了如何使用媒体查询来实现响应式设计。通常，媒体查询的语法如下： ```css @media media-type and (media-feature) { /* CSS ...
标题“exo2_media_queries”可能指的是一个关于使用CSS媒体查询（Media Queries）的示例或练习项目。在网页设计和开发中，媒体查询是响应式Web设计的关键技术，它允许内容根据设备特性的不同（如屏幕尺寸、分辨率或...
在"CSS-Grid-Media-Queries-main"这个文件包中，很可能会包含一个示例项目，演示了如何将CSS Grid和Media Queries结合起来创建一个响应式的登录页面。项目可能包括HTML文件（用于结构）、CSS文件（用于样式和布局）...
对于`<link>`标签的`media`属性，还可以配合CSS3的媒体查询（Media Queries）来实现更复杂的条件判断。媒体查询允许我们基于设备的特性，如视口宽度、设备像素比等，来应用不同的CSS规则。例如： ```html ...
通过学习源码，你可以掌握如何利用媒体查询（media queries）和栅格系统实现响应式设计。 2. **组件交互**：了解每个组件的 API 和事件处理，如点击事件、滑动事件等，这将帮助你在项目中实现丰富的用户交互。 3. ...
在压缩包"exo6_media_queries-master"中，可能包含了以下内容： 1. HTML文件：包含响应式设计的HTML结构，可能使用了`<meta>`标签的`viewport`属性来设置视口大小，这对于移动设备的显示非常重要。 2. CSS文件：包含...
在"exo1_media_queries-main"中，可能包含了一个或多个媒体查询的示例，用于演示如何在实际项目中应用。 通过学习和熟练掌握媒体查询，开发者能够创建出适应各种设备和视口的现代网页，提升用户体验。在实践中，...
npm install --save no-media-queries 示例用法 nmq(css, options, reworkOptions) ; 命令行界面 您还可以通过全局安装将其用作 CLI 应用程序： npm install --global no-media-queries $ nmq --help Usage: $ nmq...