本文介绍了响应式设计中媒体查询的三种应用方法：通过Link标签引入外部CSS，使用@import导入文件，以及直接在style标签内编写媒体查询。详细展示了不同宽度条件下的CSS样式，包括背景颜色、布局调整等，以适应不同设备屏幕尺寸。
方法一：利用Link标签从外部引入文件 <link rel='stylesheet' media='screen and (min-width:1000px)' href='./css/over1000.css'>
方法二：用import导入文件：@import url('style.css') only screen and (min-width: 500px);
方法三：直接写在style标签内
@media screen and (min-width: 800px){
//CSS
}
/* 复杂媒体查询 */
@media screen and (min-width: 700px) and (max-width: 800px){
//CSS
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel='stylesheet' media='screen and (min-width:1000px)' href='./css/over1000.css'> -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html, body, div{
padding: 0;
margin: 0;
}
.container{
min-height:150px;
display: flex;
flex-wrap: wrap;
}
.box{
background:deepskyblue;
height:100px;
width:100%;
}
.div1{
background-color:firebrick;
}
.div2{
background-color:goldenrod;
order: -1;
}
.div3{
background-color:gray;
}
.div4{
background-color:indigo;
}
.div5{
background-color:lightskyblue;
}
.div6{
background-color:fuchsia;
}
/* 因为性能原因，尽量避免使用@import */
/* @import url('no.css') only screen and (min-width: 500px); */
@media screen and (min-width: 800px){
body{
background-color:darkgray;
}
}
/* 复杂媒体查询 */
@media screen and (min-width: 700px) and (max-width: 800px){
h1{
color:darkorchid;
}
}
/* flexbox */
@media screen and (min-width: 600px) and (max-width: 700px){
.div1{
/* order: 1; */
}
.div2,.div3{
width:50%;
}
.div4,.div5,.div6{
/* order: 5; */
width: 33.3%
}
}
</style>
</head>
<body>
<!-- <h1>Hello world!!</h1> -->
<div class='container'>
<div class='box div1'></div>
<div class='box div2'></div>
<div class='box div3'></div>
<div class='box div4'></div>
<div class='box div5'></div>
<div class='box div6'></div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
