媒体查询也称作为媒介查询,media查询,它是专门用于制作移动端网站的;当用户设备的宽度为某一个范围,调用相应的css
media
一般来说,设备分为三种,一种手机端 540以下;另外一种pad端 541~960;第三种就是 pc端 960以上
外链式媒体查询
<title>外链式媒体查询</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport">
<link rel="stylesheet" href="red.css" media="(max-width:540px)">
<link rel="stylesheet" href="green.css" media="(min-width:541px) and (max-width:980px)">
<link rel="stylesheet" href="blue.css" media="(min-width:981px)">
</head>
<body>
</body>
</html>
内嵌式媒体查询
<title>内嵌式媒体查询</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport">
<style>
@media screen and (max-width: 540px){
body{
background: pink;
}
}
@media (min-width: 541px) and (max-width: 960px){
body{
background: lightsteelblue;
}
}
@media screen and (min-width: 961px){
body{
background: lightseagreen;
}
}
</style>
</head>
<body>
</body>
</html>