媒体查询实现PC端移动端的动态适配

一、媒体查询简介

1.什么时媒体查询

媒体查询提供了一种应用 CSS 的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候 CSS 才会真的被应用。

2.为什么使用媒体查询能够实现PC端移动端适配

媒体查询能够实时监听页面变化，只要尺寸变化了就会发生媒体查询检测更改Css样式

二、媒体查询使用方法

媒体查询采用添加断点的形式设置在页面变化符合断点条件的css样式变化。

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

1.media-type

MediaType媒体类型：告诉浏览器这段代码是用在什么类型的媒体上的

• all
• print
• screen
• speech

 ❗这里的媒体类型和minetype的不同

2.media-feature-rule

媒体表达式：指定css生效规则 

如下所示，设置screen宽度为400px时为断点，当窗口宽度小于400px时，设置body color为蓝色

@media screen and (max-width: 400px) {
    body {
        color: blue;
    }
}

此外还可以通过orientation来检测视口的纵横方向，它的值可以设置为：

protrait          viewport处于纵向，即高度大于宽度

landscape     viewport处于横向，即宽度大于高度 

3.多条件查询—“与” “或” “非”

与：and

或：用逗号“,”分隔查询条件

非：not

三、媒体查询的常用分辨率

@media screen and (min-width: 0px)and (max-width: 600px) {
    .box {

        &-left,
        &-center,
        &-right {
            width: 100%;
            padding: 10px;
            height: 10%;
            box-sizing: border-box;

            div {
                width: 50%;
                height: 100%;
                background: red;

            }
        }
    }
}

@media screen and (min-width: 600px)and (max-width: 800px) {
    .box {

        &-left,
        &-center,
        &-right {
            width: 100%;
            padding: 10px;
            height: 10%;
            box-sizing: border-box;


            div {
                width: 100%;
                height: 100%;
                background: red;

            }
        }
    }
}

@media screen and (min-width: 800px) and (max-width: 959px) {
    .box {

        &-left,
        &-center,
        &-right {
            width: 100%;
            padding: 10px;
            height: 10%;
            background: #000;
            box-sizing: border-box;

            div {
                // width: 50%;
                width: (200/@size);

                height: 100%;
                background: red;

            }
        }
    }
}


@media screen and (min-width: 960px) and (max-width: 1023px) {}

@media screen and (min-width: 1024px) and (max-width: 1049px) {}

@media screen and (min-width: 1050px) and (max-width: 1151px) {}

@media screen and (min-width: 1152px) and (max-width: 1279px) {}

@media screen and (min-width: 1280px) and (max-width: 1359px) {}

@media screen and (min-width: 1360px) and (max-width: 1366px) {}

@media screen and (min-width: 1400px) and (max-width: 1439px) {}

@media screen and (min-width: 1440px) and (max-width: 1599px) {}

@media screen and (min-width: 1680px) {}