响应式设计之媒体查询

来源：互联网发布：unknown网络编辑：程序博客网时间：2024/05/19 16:21

响应式设计之媒体查询

1.什么响应式设计（Responsive Design）

响应式设计是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，使网页自适应显示在不同大小终端设备上，如PC端和移动端设备。

2.什么是媒体查询（Media query）

针对不同大小的终端设备，自动检测系统尺寸、屏幕大小、屏幕定向等，选择不同的CSS样式，媒体查询是响应式的核心。

3.实例

①CSS3媒体查询引用方法

在html文件<head>标签里加入以下代码：^[2]

<html>

<head>

initial-scale=1.0, maximum-scale=1.0, user-scalable=no">//媒体查询引用

</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

0 0