【学习打卡】第五天 前端工程师2022版 媒体查询语法

课程名称： 前端工程师2022版

课程章节：响应式布局

主讲老师：Alex

课程内容：

今天学习的内容包括：

1.什么是媒体查询：Media querys

一套样式很难适应各种大小的屏幕

针对各种大小的屏幕写样式，让我们的页面在不同大小的屏幕上都能正常显示

//是屏幕设备并且屏幕宽度>=320px(断点Breakpoint)
@media screen//媒体类型 and (min-width//媒体特性:320px//断点){
    body{ 
        background-color:red;
    }
}

2.媒体类型

all(所有设备,包括后面三个 默认值）

screen(屏幕设备)/ print(打印设备)

speech(屏幕阅读器，一般供残障人士使用)

常用：all    screen

写all的时候可以省略把 all 和 and都省略

3.媒体查询中的逻辑

与(and) / 或(,) /非(not)

3.1.与（and）

查询条件全部为真时生效

当屏幕设备并且屏幕宽度>=320px   <= 375px

@media screen and (min-width:320px)and (max-width:375px) {
     body{
          color:red;
     }
}

3.2.或（，）

查询条件中任意一个为真时生效

//（screen并且屏幕宽度>=375px）或（屏幕宽度<=320px）
@media screen and (min-width:375px),(max-width:320px){
    body{
        background-color:red;    
    }
}
//（screen并且屏幕宽度>=375px）或（all并且屏幕宽度<=320px）
@media screen and (min-width:375px),all and (max-width:320px){
    body{
        background-color:red;    
    }
}

3.3.非（not）

对当前查询条件取非取反

//取反(screen 并且屏幕宽度>=320px 且 <= 375px)
//当not 与 and 同时出现，not 对整个媒体查询生效
@media not screen and (min-width:320px) and (max-width:375px){
    body{
        background-color:red;
    }
}

//取反（screen 并且 屏幕宽度>=375px) 或(all 并且屏幕宽度<=320px)，
//或条件前后是两个条件，取反只能对一部分起作用
@media not screen and (min-width:375px) , all and (max-width:320px){
 body{
     background-color:red;
  }
 }

4.媒体特性

width  / max-width / min-width

-webkit-device-pixel-ratio  (dpr 设备像素比） 

-webkit(设备兼容性

-webkit-max-device-pixel-ratio

-webkit-min-pixel-ratio

orientation(屏幕方向):landscape (水平方向)/ portrait(垂直方向）

像素比<=2并且水平方向时显示

@media (-webkit-max-device-pixel-ratio:2) and (orientation:landscape){
 body{
     background-color:red;
 }
}

获取dpr

console.log ( window.devicePixelRatio);

课程收获：

学习语法前看了老师的样式演示，发现响应式布局很常见，今天学的语法还算简单，能记住一部分的语法，其实一下子记不住也没关系，用的时候知道有这个语法，然后查就好了

今天学习课程共用了52分钟，没有练习，唯一欣慰的一点是，今天没有走神，希望能够早日走上正轨，早点找工作！

作者：Daisy_l
链接：https://www.imooc.com/article/327287
来源：慕课网