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>

查看全文

相关阅读:
hdu 1163 Eddy's digital Roots （数学）
hdu 2546 饭卡 (01背包)
hdu 1059 Dividing（多重DP）
晚霞
 最佳学习方法
 [备忘]求两数最大公约,最小公倍数
 不眠的夏夜
 超女唱《八荣八耻》：好完美的恶搞啊
 公司展会上的德国MM
我玩游戏

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