Media响应式布局

最新推荐文章于 2025-05-23 11:12:45 发布

阿苼

最新推荐文章于 2025-05-23 11:12:45 发布

阅读量288

点赞数 2

CC 4.0 BY-SA版权

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/weixin_43748930/article/details/84881041

笔记专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了媒体查询的概念，其作用在于根据不同设备调整网页样式，包括如何使用not/only关键字，以及媒体类型特征的写法，帮助开发者实现响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Media响应式
(1)概念–什么是多媒体查询？
媒体查询是指：通过css查询出访问我们网页的设备的媒体类型，来决定使用何种样式。
(2)作用–多媒体解决的问题是什么？
媒体查询的作用为：为了解决在不同媒体类型上，网页的排版，显示，样式等问题。
(3)媒体查询使用前的准备
在我们使用Media前，需要先来兼容移动设备的展示效果：

这段代码的几个参数解释： width = device-width：宽度等于当前设备的宽度 initial-scale：初始的缩放比例（默认设置为1.0） minimum-scale：允许用户缩放到的最小比例（默认设置为1.0） maximum-scale：允许用户缩放到的最大比例（默认设置为1.0） user-scalable：用户是否可以手动缩放（默认设置为no,不允许）如果不加此代码的话，在手机上可能不会根据类型应用css样式。 (4)主要媒体类型 all 用于所有多媒体类型设备 print 用于打印机 screen 用于电脑屏幕，平板，智能手机等。 speech 用于屏幕阅读器 (5)not/only关键字使用媒体查询时，媒体类型前面可以加上 not/only关键字，含义如下 not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。 only: 用来指定某种特别的媒体类型。 @media only print（只能是打印设备）。 1.对于支持媒体查询的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字，并直接根据后面的表达式应用样式文件。 2.对于不支持媒体查询的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件或相关样式代码。 (6)媒体类型特征写法： 1.以and连接媒体类型和特征 2.每个特征都写在括号中，一个括号里面只写一个特征，类似于css属性的键值对写法。 3.多个特征之间也以and相连。