移动web——媒体查询

基本概念

响应式开发在没有媒体查询前，也可以通过js来实现，但是人们基本不会考虑，特别繁琐。在出现了媒体查询，才开始逐渐推广响应式。实际开发中，在时间与金钱充足的情况下还是别做响应式，影响性能，维护麻烦。

基本使用

1、屏幕大于等于480px，使用括号里的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @media screen and (min- 480px) {
            body {
                background-color: black;
            }
        }
    </style>
</head>
<body>

</body>
</html>

2、屏幕小于等于1000px，使用括号里的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @media screen and (max- 1000px) {
            body {
                background-color: black;
            }
        }
    </style>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @media screen and (max- 1000px) {
            .header{
                display: none;
            }
        }
        .header{
            width: 100%;
            height: 50px;
            border: 1px solid #304115;
        }
    </style>
</head>
<body>
<div class="header"></div>
</body>
</html>