CSS：媒体查询

CSS 中的媒体查询（Media Queries）是响应式设计的基础，允许你根据不同的屏幕或视口尺寸来应用不同的样式规则。
媒体查询主要通过 @media 规则来实现，它可以让你指定一个或多个条件，当这些条件满足时，其中的样式将被应用。
CSS中所支持的媒体类型：常用的有 all(全部)、screen（屏幕）和print（页面打印或打印预览模式）。

应用效果

请尝试改变窗口宽度查看颜色变化
媒体width:

link方法的media属性


<link rel="stylesheet" href="../css/main.css" media="screen and (max-width:600px)"/>
<link rel="stylesheet" href="../js/layui/css/layui.css" media="print"/>

@import方法的media


<link rel="stylesheet" href="../css/main.css" media="screen and (max-width:600px)"/>
<link rel="stylesheet" href="../js/layui/css/layui.css" media="print"/>



<style>
		@import url（'css/index.css'） screen and (max-width:600px)
		@import url（'css/print.css'） print
</style>

@media方法

@media 媒体类型 and (媒体特性)
{
   具体样式
}
语法
@media [only|not] media_type and (expression ),media_type and (expression)
{
css expresion
}

媒体类型

媒体类型说明
all用于所有设备
print用于打印机和打印预览
screen用于电脑屏幕，平板电脑，智能手机等。
speech应用于屏幕阅读器等发声设备

媒体属性

媒体属性说明
color输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
height输出设备中的页面可见区域高度，可min- max-
width输出设备中的页面可见区域宽度，可min- max-
device-height输出设备屏幕的可见高度，可min- max-
device-width输出设备屏幕的可见宽度，可min- max-
resolution输出设备的分辨率dpi，可min- max-
orientation输出设备中的页面可见区域高度是否大于或等于宽度。portrait纵向模式，即宽度小于高度；landscape横向模式，即宽度大于或等于高度。

常见的媒体宽度值

媒体宽度值说明
超小设备(手机)<576px@media (max-width: 575.99px)
小型设备(平板)≥576px@media (min-width:576px) and (max-width:767.99px)
中型设备(PC)≥768px@media (min-width:768px) and (max-width:991.99px)
大型设备(PC)≥992px@media (max-width:992px) and (max-width:1199.99px)
超大型设备≥1200px@media (min-width:1200px) and (max-width:1919.99px)
超级大设备≥1920px@media (min-width:1920px)
 

	@media screen and (max-width:600px){
		background-color:#f2f2f2;
	}



		@media screen and (min-width:480px) and (max-width:900px){
		具体样式
		}



	@media not print and (max-width:480px){
		具体样式
	}

媒体查询的嵌套


	@media screen｛
		@media (max-width:768.99px){
		  /*宽度小于768px的屏显设备*/
		}
		@media (min-width:768px){
		  /*宽度大于或等于768px的屏显设备*/
		}
	}

上机训练项目

1.写一个HTML，添加一个DIV元素
2.通过@media分别赋予DIV在手机、Pad、PC端不同的样式，并观察其效果 

	<style>
		@media (max-width:768px){
		  /*宽度小于或等于768px的屏显设备*/
		  .my_div{
		  height:80px;
		  width:100%;
		  background-color:blue;
		  }
		}
		@media (min-width:768px) and (max-width:1024px) {
		  /*宽度大于或等于768px,小于等于1024的屏显设备*/
		  .my_div{
		  height:80px;
		  width:100%;
		  background-color:green;
		  }
		}
		@media (min-width:1024px){
		  /*宽度大于或等于1024px的屏显设备*/
		  .my_div{
		  height:80px;
		  width:100%;
		  background-color:red;
		  }
		}
	</style>
	<div class='my_div'></div>