03媒体查询

Posted 2021-02-28 mingliangge

媒体查询

什么是媒体查询？

指查询媒体的类型和媒体的屏幕宽度

//类型大概有三种screen、print、speech

@media screen and (min-width:300px) {  /*选择打印机与屏幕阅读器之外的所有设备，并且最小宽度 >= 300px 才会生效。*/
      color:red;
}

 

为什么需要媒体查询？

一套样式不可能适配所有屏幕，针对不同的屏幕大小写样式，让我们在不同大小的屏幕上都能正常显示

 

媒体的类型

all：所有设备（默认值）

screen：屏幕

print：打印机

speech：屏幕阅读器

@media all and (min-width:200px){}  //查询所有宽度>=200px的媒体
@media (min-width:200px){}    //默认all可以省略不写

 

媒体查询的逻辑

与：and

或：,

非：not

或
@media screen and (min-width:200px) , screen and (min-width:180px){} 
//查询最小宽度为200px的屏幕，或，查询最小屏幕为180px的屏幕。

@media screen and (min-width:200px) , (min-width:180px){} 
//查询最小宽度为200px的屏幕，或，查询所有媒体屏幕为180px的屏幕。

 

非
@media not screen and (min-width:200px) and (max-width:1000px){} 
//查询最小宽度为200px最大宽度为1000px之外的所有宽度。（not与and用，not作用到最后）

@media not screen and (min-width:200px) , (min-width:100px){} 
//查询屏幕宽度最小200px之外，或最小宽度为100px的所有媒体屏幕。（not与,用，not作用到,之前）

 

媒体特征表达式

@media (min-width:200px){} //指()里面的内容表达式

width：查询宽度
min-width：查询最小宽度
max-width：查询最大宽度

-webkit-device-pixel-ratio：设备像素比等于xx的时候
-webkit-min-device-pixel-ratio：设备像素比 >= xx的时候
-webkit-max-device-pixel-ratio：设备像素比 <= xx的时候
//像素比单位一般为1/2/3等，当像素比为3，表示设备1px显示css的3px

orientation属性
landscape：横屏
portrait：竖屏

 

媒体查询的策略

断点设置

xs超小屏：<576px（手机）

sm小屏：576~768px（大屏手机/平板）

md中屏：768~992px（平板）

lg大屏：992~1200px（电脑）

xl超大屏：>1200px（超大屏显示器）

//根据不同的设备指定不同的样式