媒体查询_媒体查询做多端适配的弊端-CSDN博客

本文链接：https://blog.csdn.net/ruantianqing/article/details/112555381

1 响应式网页开发

响应式网页制作的概念
同一个网页根据视口的不同，显示不同的版本
响应式网页制作：responsive web design(RWD)
响应式布局的优缺点：
优点：对于不同视口都可以显示非常饱满的网页结构，没有横向滚动条
缺点：制作复杂，同时对于移动端而言，需要加载非常多的pc端的样式和图片等资源，影响加载速度，同时费流量
媒体查询：
响应式布局可以在不同的视口下，呈现不同的效果，实现的原理就是通过媒体查询完成
媒体查询的使用，有以下几种：
可以直接引入样式，限定视口大小；
直接在样式中，书写不同视口下的样式

2 外链式媒体查询

使用媒体查询
不同的视口加载不同的css文件，需要使用js动态加载。但是现在通过css3的媒体查询技术就可以实现
当视口>1200px 加载0.1css media=“screen and (min-width:1201px)”
当视口<=1200px 加载0.2css media=“screen and (max-width:1200px)”
media:媒体 screen:屏幕
min-width:最小值，大于或者等于该值加载css
max-width:最大值，小于或者等于该值时加载css
media还可以分为多个端口
视口>=1200px 700px<视口<1200px 视口<=700px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 通用的样式写在最前面 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 针对不同的视口，选择不同的样式 -->
    <link rel="stylesheet" href="./css/large.css" media="screen and (min-width:1000px)">
    <!-- 为了避免更改了顺序，导致临界点发生改变，通常错开1px -->
    <link rel="stylesheet" href="./css/small.css" media="screen and (max-width:1001px)">
    <!-- 各个视口相似的样式要提取出来，防止书写多次 -->
    <title>Document</title>
</head>
<body>
    <!-- 在视口>1000的时候显示红色字体，绿色背景 -->
    <!-- 在视口<1000的时候显示蓝色字体，粉色背景 -->
    <div class="box">你好</div>
</body>
</html>

3 内嵌式媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 公用的样式 */
        .box {
            height: 100px;
            font-size: 50px;
        }
        /* 媒体查询 */
        @media screen and (max-width: 1000px) {
            /* 小屏幕 */
            .box {
                background-color: pink;
                color: blue;
            }
        }
        /* 中型屏幕 */
        @media screen and (max-width: 1000px) and (min-width: 800px){
            .box {
                background-color: blue;
                color: brown;
            }
        }
        @media screen and (min-width: 1001px) {
            /* 大屏幕 */
            .box {
                background-color: green;
                color: red;
            }
        }
    </style>
</head>
<body>
    <div class="box">hello</div>
</body>
</html>

4 使用媒体查询实现栅格系统

/* 通用样式 */
* {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 容器 */
.container {
    margin: 0 auto;
}
.row {
    display: flex;
    flex-wrap: wrap;
}

/* 栅格系统 */
/* 四类视口：768，992，1200 */
/* 超大屏幕 */
@media (min-width: 1200px) {
    .container {
        /* 不写1200是因为右侧有一个滚动条，需要减掉一块 */
        width: 1170px;
    }
    .col-lg-12 {
        width: 100%;
    }
    .col-lg-11 {
        width: 91.66666668%;
    }
    .col-lg-10 {
        width: 83.33333333%;
    }
    .col-lg-9 {
        width: 75%;
    }
    .col-lg-8 {
        width: 66.6666667%;
    }
    .col-lg-7 {
        width: 58.333333333%;
    }
    .col-lg-6 {
        width: 50%;
    }
    .col-lg-5 {
        width: 41.66666667%;
    }
    .col-lg-4 {
        width: 33.33333333%;
    }
    .col-lg-3 {
        width: 25%;
    }
    .col-lg-2 {
        width: 16.66666667%;
    }
    .col-lg-1 {
        width: 8.33333333%;
    }
}
/* 中型屏幕 */
@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        width: 970px;
    }
    .col-md-12 {
        width: 100%;
    }
    .col-md-11 {
        width: 91.66666668%;
    }
    .col-md-10 {
        width: 83.33333333%;
    }
    .col-md-9 {
        width: 75%;
    }
    .col-md-8 {
        width: 66.6666667%;
    }
    .col-md-7 {
        width: 58.333333333%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-5 {
        width: 41.66666667%;
    }
    .col-md-4 {
        width: 33.33333333%;
    }
    .col-md-3 {
        width: 25%;
    }
    .col-md-2 {
        width: 16.66666667%;
    }
    .col-md-1 {
        width: 8.33333333%;
    }
}
/* 平板屏幕 */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        width: 750px;
    }
    .col-sm-12 {
        width: 100%;
    }
    .col-sm-11 {
        width: 91.66666668%;
    }
    .col-sm-10 {
        width: 83.33333333%;
    }
    .col-sm-9 {
        width: 75%;
    }
    .col-sm-8 {
        width: 66.6666667%;
    }
    .col-sm-7 {
        width: 58.333333333%;
    }
    .col-sm-6 {
        width: 50%;
    }
    .col-sm-5 {
        width: 41.66666667%;
    }
    .col-sm-4 {
        width: 33.33333333%;
    }
    .col-sm-3 {
        width: 25%;
    }
    .col-sm-2 {
        width: 16.66666667%;
    }
    .col-sm-1 {
        width: 8.33333333%;
    }
}
/* 手机屏幕 */
@media (max-width: 767px) {
    .col-xs-12 {
        width: 100%;
    }
    .col-xs-11 {
        width: 91.66666668%;
    }
    .col-xs-10 {
        width: 83.33333333%;
    }
    .col-xs-9 {
        width: 75%;
    }
    .col-xs-8 {
        width: 66.6666667%;
    }
    .col-xs-7 {
        width: 58.333333333%;
    }
    .col-xsx-6 {
        width: 50%;
    }
    .col-xs-5 {
        width: 41.66666667%;
    }
    .col-xs-4 {
        width: 33.33333333%;
    }
    .col-xs-3 {
        width: 25%;
    }
    .col-xs-2 {
        width: 16.66666667%;
    }
    .col-xs-1 {
        width: 8.33333333%;
    }
}