zoukankan html css js c++ java

移动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>

查看全文

相关阅读:
github 代理加速
 centos系统语言设置为中文
 红帽 / CentOS安装Jenkins
查看api有没有更新到位
 永久关闭Windows10或Windows11的系统自动更新
 api传文件连接超时
 docker日常使用
 开发者工具批量替换
 Linux常用工具安装
 office密钥

原文地址：https://www.cnblogs.com/wuqiuxue/p/8287618.html