Media queries 使用示例
一、下载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 方块外部的空间 */
}