您的位置：首页 > 其它

响应式布局之媒体查询

2016-02-27 14:42 323 查看

媒体查询可以根据设备显示器特性设定CSS样式。

媒体查询语法：

1、写在样式里:
@media 条件

@media screen and (max-width: 550px){
/*样式*/
}

2、写在link标签里

<link rel="stylesheet" media="screen and (max-width:550px)" href="media.css"/>

媒体查询常用的是检测视口宽度（width）和屏幕宽度（device-width）。

试一下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体查询</title>
<style>
body{
background-color: grey;
}
/*窗口< 960px*/
@media screen and (max-width: 960px){
body{
background: red;
}
}
/*窗口< 768px*/
@media screen and (max-width: 768px) {
body{
background:orange;
}
}
/*窗口< 550px*/
@media screen and (max-width: 550px){
body{
background:yellow;
}
}
/*窗口< 320px*/
@media screen and (max-width: 320px){
body{
background: green;
}
}
</style>

</head>
<body>
改变浏览器窗口宽度，背景颜色会根据当前视口尺寸发生改变。
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航