使用媒体查询和jQuery实现响应式布局
本文详细介绍了如何利用jQuery.mediaqueries.js和CSS媒体查询实现网页的响应式布局，包括不同屏幕尺寸下的样式调整，以及针对特定设备的手持设备优化。通过编写default.css、wider.css和handheld-iphone.css三种样式表，实现不同设备和浏览器的兼容性。同时，文章还演示了如何在HTML中引用这些样式表，确保网页在各种设备上都能呈现最佳的视觉效果。
一、下载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 方块外部的空间 */
}
扫一扫
892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
