响应式布局之媒体查询

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了响应式布局之媒体查询相关的知识,希望对你有一定的参考价值。

媒体查询可以根据设备显示器特性设定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>

 

以上是关于响应式布局之媒体查询的主要内容,如果未能解决你的问题,请参考以下文章

论:响应式布局之css3媒体查询器

移动端WEB开发之响应式布局

移动WEB开发之响应式布局

移动WEB开发之响应式布局

解决媒体查询的响应式布局

CSS3响应式布局(媒体查询@media)