《十三》CSS3 媒体查询

媒体查询：Media querys，针对不同大小的屏幕写不同的样式，让网页在不同大小的屏幕上都能正常显示。

媒体查询在 CSS2 的时候已经出现，CSS2 用 link 标签，而 CSS3 用 @meida 定义。两者用法类似，但是 CSS3 与 CSS2 相比会减小页面的请求。

// 屏幕设备，且屏幕宽度大于等于 375px

//CSS2
<link rel="stylesheet" media="screen and (min-width:375px)"  href="style.css" /> 

//CSS3
@media screen and (min-width:375px) { 
	div{color:red;}
}

基础语法：

媒体类型：

1. all：默认值，可省略。用于所有设备。
2. screen：用于电脑屏幕、平板电脑、手机屏幕等屏幕设备。
3. print：用于打印机和打印预览等打印设备.
4. speech：用于屏幕阅读器等发声设备，一般供残障人士使用。

媒体逻辑：

1. and：与。使用 and 连接的查询条件全部为真时才生效。

2. ,：或。使用 , 连接的查询条件中的任意一个为真时生效。

   使用 and 连接的查询条件是一整个查询条件。
   使用 , 连接的查询条件是分开的不同的查询条件。

   // 屏幕设备，且屏幕宽度大于等于 750px；或者所有设备，且设备宽度小于等于 375px
   @media screen and (min-width: 750px), (max-width: 375px) { 
   	div{color:red;}
   }
   

3. not：非。对当前的查询条件取反。

   当 not 与 and 同时存在，not 对 and 所在的整个媒体查询生效。
   not 与逗号分隔的多个媒体查询同时存在时，not 只对它所在的那个查询生效。

   // 取反（屏幕设置，且屏幕宽度大于等于 375px，小于 750px）
   @media not screen and (min-width: 375px) and (max-width: 750px) { 
   	div{color:red;}
   }
   
   // 取反(屏幕设备，且屏幕宽度大于等于 750px) ；或者所有设备，且设备宽度小于等于 375px
   @media not screen and (min-width: 750px), (max-width: 375px) { 
   	div{color:red;}
   }
   

媒体特性：

1. width：定义宽度。
2. height：定义高度。
3. max-width：定义最大宽度。
4. max-height：定义最大高度。
5. min-width：定义最小宽度。
6. min-height：定义最小高度。
7. orientation：定义屏幕方向。portrait 竖屏，landscape 横屏。
8. -webkit-device-pixel-ratio：定义设备像素比 dpr，只有 webkit 内核的浏览器才支持。
9. -webkit-max-device-pixel-ratio：定义最大的设备像素比 dpr，只有 webkit 内核的浏览器才支持。
10. -webkit-min-device-pixel-ratio：定义最小的设备像素比 dpr，只有 webkit 内核的浏览器才支持。

    可以通过 window.devicePixelRatio 来获取到设备像素比。

断点：

// 375px 就是一个断点 Breakpoint
@media screen and (min-width:375px) { 
	div{color:red;}
}

如何设置断点：

1. 可以参考 Bootstrap：
   • xs：<576px，超小屏。
   • sm：576px ~ 768px，小屏。
   • md：768px ~ 992px，中屏。
   • lg：992px ~ 1200px，大屏。
   • xl：>=1200px，超大屏。
2. 也可以改变屏幕大小，当页面显示不正常或者不符合设计要求的时候，就需要设置断点了。

策略：

假设现在有 12 张图片，参考 Bootstrap 来设置断点，希望超小屏一行显示一张图片，小屏一行显示两张图片，中屏一行显示四张图片，大屏一行显示六张图片，超大屏一行显示十二张图片。

<style>
	.row {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
</style>
	
<div class="row">
	<img src="./food.png" class="img" />
	<img src="./food.png" class="img" />
	<img src="./food.png" class="img" />
	<img src="./food.png" class="img" />
	<img src="./food.png" class="img" />
	<img src="./food.png" class="img" />
	<img src="./food.png" class="img" />
	<img src="./food.png" class="img" />
	<img src="./food.png" class="img" />
	<img src="./food.png" class="img" />
	<img src="./food.png" class="img" />
	<img src="./food.png" class="img" />
</div>

1. 无策略：

   @media (max-width: 576px) {
   	.img {
   		width: 100%;
   	}
   }
   @media (min-width: 576px) and (max-width: 768px) {
   	.img {
   		width: 50%;
   	}
   }
   @media (min-width: 768px) and (max-width: 992px) {
   	.img {
   		width: 25%;
   	}
   }
   @media (min-width: 992px) and (max-width: 1200px) {
   	.img {
   		width: 16.666666%;
   	}
   }
   @media (min-width: 1200px) {
   	.img {
   		width: 8.333333%;
   	}
   }
   

2. PC 端优先：先考虑 PC 端，再考虑移动端。从大屏到小屏编写代码，排在第一位的屏幕可以作为默认值，不需要使用媒体查询。

   .img {
   	width: 8.333333%;
   }
   @media (max-width: 1200px)  {
   	.img {
   		width: 16.666666%;
   	}
   }
   @media (max-width: 992px) {
   	.img {
   		width: 25%;
   	}
   }
   @media (max-width:768px) {
   	.img {
   		width: 50%;
   	}
   }
   @media (max-width:576px) {
   	.img {
   		width: 100%;
   	}
   }
   

3. 移动端优先：先考虑移动端，再考虑 PC 端。从小屏到大屏编写代码，排在第一位的屏幕可以作为默认值，不需要使用媒体查询。

   .img {
   	width: 100%;
   }	
   @media (min-width: 576px) {
   	.img {
   		width: 50%;
   	}
   }
   @media (min-width: 768px) {
   	.img {
   		width: 25%;
   	}
   }
   @media (min-width: 992px) {
   	.img {
   		width: 16.666666%;
   	}
   }
   @media (min-width: 1200px) {
   	.img {
   		width: 8.333333%;
   	}
   }