HTML&CSS Day09 CSS媒体查询

快来打我* 2024-03-16 16:25 15阅读 0赞

#### 文章目录 ####

*  媒体查询
 *   *  \- 什么是媒体查询？
     *  \- 媒体查询与弹性盒布局的适用情况
     *  \- 使用方法
     *   *  @media 媒体类型 and （媒体特性）\{你的样式\}
         *  \-媒体类型
         *  \-媒体属性
         *  \- 最大宽度max-width
         *  \- 最小宽度min-width
         *  \- 多个媒体特性使用
         *  \- 设备屏幕的输出宽度Device Width
         *  \-逗号分隔列表
         *  \- not关键词
         *  \- only关键词
         *  \- 在Media Query中如果没有明确指定Media Type，那么其默认为all，如：
         *  \- 在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示。
 *  媒体查询示例

## 媒体查询 ##

### \- 什么是媒体查询？ ###

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

### \- 媒体查询与弹性盒布局的适用情况 ###

媒体查询：当页面的结构发生变化的话最好使用媒体查询。  
弹性盒：如果只是宽高的变化，尽量使用弹性盒

### \- 使用方法 ###

<link rel="stylesheet" media="(min-width: 800px)" href="example.css" />
    
    
    <style>
    @media (max-width: 600px) {
          
      .class {
          
        display: none;
      }
    }
    </style>

#### @media 媒体类型 and （媒体特性）\{你的样式\} ####

使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如：

(max-width: 480px)

与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，而不是使用小于（<）和大于（>）这样的符号来判断。

#### \-媒体类型 ####

<table> 
 <thead> 
  <tr> 
   <th align="center"><strong>all</strong></th> 
   <th align="center"><strong>所有媒体（默认值）</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center"><strong>screen</strong></td> 
   <td align="center"><strong>彩色屏幕</strong></td> 
  </tr> 
  <tr> 
   <td align="center"><strong>print</strong></td> 
   <td align="center"><strong>打印预览</strong></td> 
  </tr> 
 </tbody> 
</table>

#### \-媒体属性 ####

<table> 
 <thead> 
  <tr> 
   <th align="center"><strong>width</strong></th> 
   <th align="center"><strong>（可加max min前缀）</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center"><strong>height</strong></td> 
   <td align="center"><strong>（可加max min前缀）</strong></td> 
  </tr> 
  <tr> 
   <td align="center"><strong>device-width</strong></td> 
   <td align="center"><strong>（可加max min前缀）</strong></td> 
  </tr> 
  <tr> 
   <td align="center"><strong>orientation</strong></td> 
   <td align="center"><strong>portrait竖屏/landscape横屏</strong></td> 
  </tr> 
 </tbody> 
</table>

#### \- 最大宽度max-width ####

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。

@media screen and (max-width:580px){
        
     body {
        
       background-color: red;
      }
    }

> 上面表示的是：当屏幕小于或等于580px时,页面的背景颜色变为红色。

#### \- 最小宽度min-width ####

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){
        
      .wrapper{
        width: 980px;}
    }

> 上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

#### \- 多个媒体特性使用 ####

Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。  
当屏幕在600px~900px之间时，body的背景色渲染为“blue”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){
        
      body {
        background-color:blue;}
    }

#### \- 设备屏幕的输出宽度Device Width ####

在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。

#### \-逗号分隔列表 ####

当使用媒体查询的逗号分隔列表时，如果列表中的任何媒体查询为true，样式表都会被运用。在逗号分隔列表中的每个媒体查询都被作为独立查询对待，运用到一个媒体查询上的任何操作符都不影响其它的。

例如，如果你想应用一套样式在宽度大于等于700px的设备上，或者采用横向模式的便捷式设备上，你可以这样：

@media (min-width: 700px),handheld and (orientation: landscape) {
         ... }

如果我使用的设备的屏幕宽度大于700px，媒体查询将返回true，样式将被运用。如果我使用的是横向的便捷式设备，第一个媒体查询返回false，但第二个媒体查询将返回true，样式仍将被使用。

#### \- not关键词 ####

使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如：

@media not print and (max-width: 1200px){
        样式代码}

> 上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

#### \- only关键词 ####

only操作符表示仅在媒体查询匹配成功时应用指定样式。  
可以通过它让选中的样式在老式浏览器中不被应用

media="only screen and (max-width:1000px)"{
        ...}

上面这行代码，在老式浏览器中被解析为media=“only”，因为没有一个叫only的设备，所以实际上老式浏览器不会应用样式

media="screen and (max-width:1000px)"{
        ...}

上面这行代码，在老式浏览器中被解析为media=“screen”，它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式。所以，在使用媒体查询时，only最好不要忽略

#### \- 在Media Query中如果没有明确指定Media Type，那么其默认为all，如： ####

#### \- 在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示。 ####

上面代码中style.css样式被用在宽度小于或等于480px的打印预览上，或者被用于屏幕宽度大于或等于960px的设备上。

## 媒体查询示例 ##

分别设置PC,iPad,iPhone端的展示效果  
PC

/* width > 1200px 一行放四个div */
    .parent{
        
    	display: flex;
    }
    .child{
        
    	width: 300px;
    	height: 300px;
    	border: 1px solid rosybrown;
    	margin-left: 10px;
    }

iPad

/* 768<ipad<1200 一行显示两个div */
    .parent{
        
    	display: flex;
    	flex-wrap: wrap;
    	/* justify-content: center; */
    }
    
    .child{
        
    	flex: 0 1 50%;
    	height: 300px;
    	margin-top: 10px;
    	border: 5px solid rosybrown;
    	box-sizing: border-box;
    }

iPhone

/* iphone<600px 一行显示一个div */
    .parent{
        
    	display: flex;
    	flex-wrap: wrap;
    	justify-content: center;
    }
    .child{
        
    	width: 300px;
    	height: 300px;
    	border: 1px solid rosybrown;
    	margin-top: 10px;
    }

HTML文件

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Document</title>
    	
    	<link rel="stylesheet" media="(min-width:1200px)" href="./CSS/1-pc.css">
    	
    	<link rel="stylesheet" media="(min-width:768px) and (max-width:1199px)" href="./CSS/2-ipad.css">
    	
    	<link rel="stylesheet" media="(max-width:600px)" href="./CSS/3-iphone.css">
    </head>
    <body>
    	<div class="parent">
    		<div class="child"></div>
    		<div class="child"></div>
    		<div class="child"></div>
    		<div class="child"></div>
    	</div>
    </body>
    </html>