媒体查询也称作为媒介查询，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>
317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
