移动web——媒体查询

Posted 2020-10-20 站错队了同志

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动web——媒体查询相关的知识，希望对你有一定的参考价值。

基本概念

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

基本使用

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

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

以上是关于移动web——媒体查询的主要内容，如果未能解决你的问题，请参考以下文章

移动WEB开发之rem基础&媒体查询

Web移动前端开发-——rem+less+媒体查询，rem+flexble.js+媒体查询

移动web开发———第四天

移动WEB开发分享

响应式web-媒体查询