媒体查询

我会带着你远行 2022-05-09 04:48 266阅读 0赞

## 定义和使用 ##

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

**2. css2中media查询：**

**通过<link>标签的media属性为样式表指定设备类型：**

比如：

**（1）设备最大宽度是800px时，加载demo.css文件样式**

**(2)500px-800px之间的设备：**

**(3)最小宽度500px时：**

**(4)在非打印设备下：**

**注意：not 逻辑操作符，必须用于开头，且会否定整个media声明。上述代码表示：not (print and max-width:800px) **

比如：不在（screen 且 最大宽度是800px）

** 上述代码在“screen且宽度大于800px”的情况下，会加载“demo.css”文件。**

**（5）orientation：portrait**

指定输出设备中的页面可见区域**高度大于或等于宽度（height >= width）**

**显示屏纵向放置**

**（6）或逻辑操作符 ,**

表示：宽度小于等于高度的屏幕 或 最小宽度6英寸的打印设备 会加载demo.css样式

**3. css3的media查询**

特点：css样式中，不同情况下，标签的类选择器加载不同的样式

当然，该css样式可以采用link标签将外部css文件引入的方式，可以将css样式写在一个css文件中引入，而不是在800px下，引入demo1.css文件，在600px下引入demo2.css文件。

**4. 媒体类型：**screen（电脑、手机、平板等屏幕），print（打印设备），all（所有设备）

**5. 媒体特性**：基本上只用到与width属性相关的属性，比如：max-width（最大宽度）、min-width（最小宽度）、width（渲染宽度）、device-width（设备宽度）

**6. 通常情况下，px是相对单位，**但是在该标签中，**如下设置，px是绝对单位**。即不同设备下，都是这么大。

实例：旋转木马的项目中，在浏览器中查看和在我自己手机上查看都是一样大。

**7. 页面缩放的问题：**

（1）页面放大后，浏览器中的文档效果会变大，但是浏览器的宽高并没有变化，而文档中的标签元素会触发media中宽度变小的效果，好像是：浏览器宽高变小了，而触发了标签宽度小的时候的css样式。

（2）现在页面的设计不允许缩放，因为会重新布局页面：

**8. 媒体查询尺寸**

![08111725-e0f2ee5e439a4416a1c09150b07ee35f.jpg][]

所以设置的常有：

@media screen and (min-width:1200px)

@media screen and (min-width:992px)

@media screen and (min-width:768px)

@media screen and (min-width:480px)

在设置时，需要注意先后顺序，不然后面的会覆盖前面的样式。

[08111725-e0f2ee5e439a4416a1c09150b07ee35f.jpg]: /images/20220509/609c4df4b946407b8b7689645e2e2504.png

媒体查询

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关媒体查询

相关媒体查询

相关媒体查询

相关 CSS媒体查询

相关 media媒体查询

相关媒体查询 @media

相关媒体查询

相关 js媒体查询

相关关于media媒体查询

相关 CSS媒体查询