什么是媒体查询
媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有：width、height和color（等）。使用媒体查询可以在不改变页面内容的情况下，为特性的一些输出设备定制显示效果。
媒体查询语法
CSS3中的媒体查询：根据浏览器窗口大小的改变，页面颜色就会改变。
<!DOCTYPE html>
<html\>
<head>
<title>无标题文档</title>
</head>
<style>
body{
background-color:#0033FF;
}
@media screen and (max-width: 960px){
body{
background-color:#FF6699
}
}
@media screen and (max-width: 768px){
body{
background-color:#00FF66;
}
}
@media screen and (max-width: 550px){
body{
background-color:#6633FF;
}
}
@media screen and (max-width: 320px){
body{
background-color:#FFFF00;
}
}
</style>
<body>
<p>my first @media</p>
</body>
</html>
CSS2中media:通过<link>标签的media属性为样式表指定设备类型：
<link rel="stylesheet" media="screen" href="portrait-screen.css"/>
媒体查询则能使我们根据设备的各种功能特性来设定响应的样式，而不仅仅只针对设备类型，在媒体查询的开头追加not会颠倒该查询的逻辑：
<link rel+"stylesheet" media="screen and (orientation: portrait)" href="portrait-screen.css"/> //设置了媒体类型和媒体特性（显示屏， 纵向放置） <link rel="stylesheet" media="not screen and (orientation: portrait)" href="portrait- screen.css" /> //非纵向放置的显示屏 <link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:800px)" href="800wide-portrait-screen.css" /> //限制只有视口宽度大于800px像素的显示屏设备才能加载此文件
媒体查询列表（需要用逗号隔开）：
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:800px), projection" href="800wide-portrait-screen.css" />
除了以上方法还可以使用CSS中的@import指令在当前样式表中按条件引入其他样式表。（使用@import方法会增加HTTP请求影响加载速度）
@import url("phone.css") screen and (max-width:360px);
媒体查询可以检测的特性：
时间： 2024-09-30 16:14:01