媒体查询适配

媒体查询

媒体查询：根据一个或多个基于设备类型、具体特点和环境来应用样式

1、媒体类型
2、媒体特性
3、逻辑运算符

媒体类型

all 所有设备
print 打印机设备
screen 彩色的电脑屏幕
speech 听觉设备（针对有视力障碍的人士，可以把页面的内容以语音的方式呈现的设备）

注意：tty、tv、projection、handheld、braille、embossed、aural 等几种类型在媒体查询 4 中已经废弃

媒体特性

一、width 宽度

1. min-width 最小宽度，宽度只能比这个大
2. max-width 最大的宽度，宽度只能比这个小

二、height 高度

1. min-height 最小高度，高度只能比这个大
2. max-height 最大的高度，高度只能比这个小

三、orientation 方向
landscape 横屏 (宽度大于高度)
portrait 坚屏 (高度大于宽度)
aspect-ratio 宽度比
-webkit-device-pixel-ratio 像素比 (webkit 内核的私有属性)

/* 400-500之间是默认的 */
div {
    width: 100px;
    height: 100px;
    background: red;
}

/* 屏幕尺寸大于500的时候满足 */
@media (min-width: 500px) {
    div {
        background: green;
    }
}

/* 屏幕尺寸小于400的时候满足 */
@media (max-width: 400px) {
    div {
        background: blue;
    }
}

/* 横屏的时候满足 */
@media (orientation: landscape) {
    div {
        width: 400px;
        height: 100px;
    }
}

/* 竖屏的时候满足 */
@media (orientation: portrait) {
    div {
        width: 100px;
        height: 400px;
    }
}

/* 宽高比为4：3的时候满足，800*600的时候是4：3 */
@media (aspect-ratio: 4/3) {
    div {
        border: 10px solid #000;
    }
}

/* 当像素比为2的时候，满足 */
@media (-webkit-device-pixel-ratio: 2) {
    div:after {
        content: '陈学辉';
        font-size: 50px;
    }
}

逻辑运算符：用来做条件判断

and       合并多个媒体查询（并且的意思）
,         区配某个媒体查询（或者的意思）
not       对媒体查询结果取反
only      仅在媒体查询匹配成功后应用样式（防范老旧浏览器）

当屏幕尺寸同时满足好几条件时，会取最大值

div {
    width: 200px;
    height: 200px;
    background: red;
}

/* 屏幕的尺寸比700大的时候以及横屏的时候满足 */
@media all and (min-width: 700px) and (orientation: landscape) {
    div {
        background: green;
    }
}

/* 屏幕尺寸比800小，或者屏幕为横屏的时候满足 */
@media (max-width: 800px), (orientation: landscape) {
    div {
        background: pink;
    }
}

/* 屏幕的尺寸要大于800的时候，整个才满足 */
@media not all and (max-width: 800px) {
    div {
        background: blue;
    }
}

@media only screen and (min-width: 1000px) {
    div {
        background: grey;
    }
}

媒体查询应用

div {
    padding: 50px 0;
    border: 1px solid #000800;
}
div:after {
    content: '这是一所房子';
}

/* 小于1000的尺寸就满足 */
@media all and (max-width: 1000px) {
    div {
        background: green;
    }
    div:after {
        content: '哇，房子好大哦，可以放下坑了';
    }
}

/* 小于800的时候就满足 */
@media all and (max-width: 800px) {
    div {
        background: khaki;
    }
    div:after {
        content: '喔，房子变小了，只能放一张双人床';
    }
}

/* 尺寸小于500就满足 */
@media all and (max-width: 500px) {
    div {
        background: hotpink;
    }
    div:after {
        content: '哎，房子更小了，只能放下一张单人床';
    }
}

/* 小于300的时候满足 */
@media all and (max-width: 300px) {
    div {
        background: turquoise;
    }
    div:after {
        content: '咦，房子也忒小了，床都放不下';
    }
}

media 媒体查询从移动端到 PC 端的适配

/* 小于768 ipad*/
@media screen and (max-width: 768px) {
    html {
        font-size: 18px;
    }
}
/*小于 480px  手机*/
@media screen and (max-width: 480px) {
    html {
        font-size: 16px;
    }
}

/*768-1023*/
@media screen and (min-width: 769px) and (max-width: 1023px) {
    html {
        font-size: 20px;
    }
}
/*1024-1279*/
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    html {
        font-size: 24px;
    }
}
/*1280-1440*/
@media screen and (min-width: 1280px) and (max-width: 1439px) {
    html {
        font-size: 26px;
    }
}

/*>=1440的设备屏幕*/
@media screen and (min-width: 1440px) {
    html {
        font-size: 28px;
    }
}
/*>=1920的设备屏幕*/
@media screen and (min-width: 1920px) {
    html {
        font-size: 34px;
    }
}

/* PC端 */
/* >=1920px */
@media (min-width: 1921px) {
    html {
        font-size: 30px;
    }
}

@media (max-width: 1920px) {
    html {
        font-size: 26px;
    }
}

@media (max-width: 1600px) {
    html {
        font-size: 24px;
    }
}

@media (max-width: 1440px) {
    html {
        font-size: 22px;
    }
}

@media (max-width: 1280px) {
    html {
        font-size: 20px;
    }
}

@media (max-width: 1024px) {
    html {
        font-size: 18px;
    }
}

/* 移动端 */
@media (max-width: 999px) {
    html {
        font-size: 20px;
    }
}
@media (max-width: 759px) {
    html {
        font-size: 20px;
    }
}
@media (max-width: 376px) {
    html {
        font-size: 20px;
    }
}

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

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

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

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

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

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

//手机端
@media screen and (max-width: 900px) {
}

@media screen and (max-width: 320px) {
}