CSS3 中媒体查询 @media 的常见使用和案例说明

深藏阁楼爱情的钟 2022-12-23 06:53 58阅读 0赞

**@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，说白了就是对样式的重置；**

**媒体类型**：

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>all</td> 
   <td>适用于所有设备</td> 
  </tr> 
  <tr> 
   <td>screen</td> 
   <td>用于PC端，智能手机，平板中</td> 
  </tr> 
  <tr> 
   <td>print</td> 
   <td>应用于打印机或打印预览</td> 
  </tr> 
  <tr> 
   <td>speech</td> 
   <td>用于屏幕阅读器等发声设备</td> 
  </tr> 
 </tbody> 
</table>

**媒体功能**：  
min-width：适用于PC端和移动端  
min-device-width：只适用于移动端

**当使用min-的时候，从小到大排布**：

body { 
    			background: red
    		}
    		@media screen and (min-width: 750px) { 
    			/* 当最小值是750px的时候 */
    			body { 
    				background: blue
    			}
    		}
    		@media screen and (min-width: 950px) { 
    			/* 当最小值是950px的时候 */
    			body { 
    				background: skyblue
    			}
    		}
    		@media screen and (min-width: 1050px) { 
    			/* 当最小值是1050px的时候 */
    			body { 
    				background: pink
    			}
    		}

**当使用max的时候，从大往小排布**：

body { 
    			background: red
    		}
    		@media screen and (max-width: 1050px) { 
    			/* 当最小值是750px的时候 */
    			body { 
    				background: blue
    			}
    		}
    		@media screen and (max-width: 950px) { 
    			/* 当最小值是950px的时候 */
    			body { 
    				background: skyblue
    			}
    		}
    		@media screen and (max-width: 750px) { 
    			/* 当最小值是1050px的时候 */
    			body { 
    				background: pink
    			}
    		}

**通过媒体查询实现页面排布的案例，超过1000px一行4个，700px放三个，400px两个，小于400 放1个**：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    	<title>@media查询 排布</title>
    	<style> .con { width: 100%; height: 600px; } .con div { width: 100%; height: 300px; background: pink; border: 1px solid blue; float:left; } @media screen and (min-width: 400px) { .con div { width: 49%; } } @media screen and (min-width: 700px) { .con div { width: 32.33%; } } @media screen and (min-width: 1000px) { .con div { width: 24%; } } </style>
    </head>
    <body>
    	<div class="con">
    		<div></div>
    		<div></div>
    		<div></div>
    		<div></div>
    	</div>
    </body>
    </html>