媒体查询（Media Queries），可以根据不同的媒体情况加载相应的样式。
有两种使用方式：
（1）样式表文件
例如：
<link
rel="stylesheet"
type="text/css"
href="styleA.css"
media="screen and (min-width: 400px)"
>
<u></u>media属性用来进行媒体查询。
其中，screen表示媒体类型，CSS2.1定义了10种媒体类型。
<u></u>add称为关键字，其他关键字还有not，only等
<u></u>(min-width:400px)表示媒体特性，要加载该样式表文件，支持的最小设备宽度为400px。
（2）样式
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
......
}
表示当屏幕尺寸小于600px时，应用包含的样式。
1、响应式 Web 设计 - 媒体查询 媒体(media)查询在 CSS3 上有介绍：CSS3 @media 查询...
CSS3多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3...
CSS3 Media Queries ， CSS3媒体查询。使用 @media 查询，你可以针对不同的媒体类型定义...
1、CSS3 多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，C...
媒体查询一定要放在初始设置的css样式底下，否则会被后面设置的css样式覆盖掉媒体查询所设置的样式，那么媒体查询就...
一、为什么需要媒体查询 CSS3的媒体查询模块就是为了针对设备特性（width、height等）设置特定的css样...
CSS3 媒体查询 media媒体查询技术的原理：通过匹配不同屏幕设备的特征,让不同特征下的CSS代码生效。常用匹...
CSS-移动端页面（响应式） 媒体查询
能够让网站针对不同的浏览器和设备呈现不同显示效果 引入媒体查询 媒体查询写在CSS样式代码的最后，CSS是层叠样式...
1、css3媒体查询 IE8不支持媒体查询 解决：respond.js，在页面中所有css文件的引用位置之后引用R...
本文标题：[CSS] 媒体查询
本文链接：https://www.haomeiwen.com/subject/misnkttx.html
网友评论