假设body里面有两个div,当屏幕宽度>640px的时候,让屏幕一行显示两个div,当屏幕宽度>320px的时候,让屏幕一行显示一个div
<body>
<div></div>
<div></div>
</body>
style320.css
div{
width: 100%;
height: 100px;
}
div:nth-child(1){
background-color: #31A6FD;
}
div:nth-child(2){
background-color: #222222;
}
style640.css
div{
width: 50%;
height: 100px;
float: left;
}
div:nth-child(1){
background-color: #31A6FD;
}
div:nth-child(2){
background-color: #222222;
}
通过媒体查询引入两个css文件
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">