响应式设计是让网站在不同设备上呈现不同效果的策略，通过媒体查询实现自适应。媒体查询能根据设备尺寸应用不同CSS样式，如在不同屏幕宽度下设置body宽度。例如，当屏幕宽度在960px到1200px时，body宽度设为100%，在560px到960px时设为60%，小于480px时设为20%。
响应式设计之媒体查询
1.什么响应式设计（Responsive Design）
响应式设计是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，使网页自适应显示在不同大小终端设备上，如PC端和移动端设备。
2.什么是媒体查询（Media query）
针对不同大小的终端设备，自动检测系统尺寸、屏幕大小、屏幕定向等，选择不同的CSS样式，媒体查询是响应式的核心。
3.实例
①CSS3媒体查询引用方法
在html文件<head>标签里加入以下代码：[2]
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no">//媒体查询引用
<link rel="stylesheet" href="mediaQuery.css" />//引用css样式
</head>
</html>
参数解释：
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
②常用媒体查询条件和媒体功能参数表[3]
| 功能 | 值 | 最大\最小值 | 描述 |
| width | 长度：px、auto、百分比数 | 是 | 显示区域的宽度 |
| height | 长度：px、auto、百分比数 | 是 | 显示区域的高度 |
| device-width | 长度：px、auto、百分比数 | 是 | 设备的宽度 |
| orientation | portrait 或landscape | 否 | 设备的方向 |
③编写方法：创建一个CSS文件如mediaQuery.css文件，文件中编写针对不同设备的样式，示例：
@media screen and (min-device-width: 960px) and (max-width:1200px){
body{width:100%;}
img{width:960px;;overflow:hidden;}
......(注：可以在这里面设计网页元素的CSS样式）
}
代码解释：当屏幕宽度大于等于960px小于1200px时，宽度大小设置为100%。图片大小为960px，超出的部分隐藏。
@media screen and (min-width: 560px) and (max-width:960px){
body{width:60%;}
}
代码解释：当屏幕宽度大于560px而小于960px时，宽度大小设置为60%。
@media screen and (max-width: 480px){
body{width:20%;}
}
代码解释：当屏幕宽度小于480px时，宽度大小设置为20%。
4.引用资料
[1].http://zh.learnlayout.com/media-queries.html
[2]http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml
[3]http://www.adobe.com/cn/devnet/dreamweaver/articles/introducing-media-queries.html
扫一扫
461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
