响应式布局媒体查询

响应式布局（responsive web design）指的是在网页开发过程中针对不同设备
开发一套网站，然后根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕
定向等）自适应地显示不同布局。响应式布局的核心是媒体查询。媒体查询
（media query）是获取用户行为和设备环境、然后提供相应的css规则的过程

的简称。媒体查询让css可以更精确作用于不同的媒体类型和同一媒体的不同条件。

CSS 语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

1.目录结构

2.index.html

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!--link元素中的CSS媒体查询-->  
    <link rel="stylesheet" media="screen and (max-500px)" href="style.css">  
    <style>  
        .mystyle1 {  
            background-color:lightgreen;  
        }  
  
        .mystyle2 {  
            background-color: #64989a;  
        }  
  
        /*样式表中的CSS媒体查询*/  
        @media screen and (max- 500px) {  
            .mystyle1 {  
                background-color:lightblue;  
            }  
        }  
    </style>  
</head>  
<body>  
<p>当浏览器窗口的宽度小于 500 像素时，背景颜色会有变化。</p>  
<div class="mystyle1">徐同保</div>  
<div class="mystyle2">徐同保</div>  
  
</body>  
</html>

3.style.css

.mystyle2 {
    background: red !important;
}

4.运行结果

大于500px时

小于500px时

响应式布局 媒体查询

响应式布局媒体查询