css3媒体查询简单实例

实现要求

当在一定屏幕下实现换行显示

 

CSS3实现代码

<style type="text/css">
.mydiv{
background-color: yellow;
width: 20rem;
height: 20rem;
margin: 3rem 3rem;
float: left;
}

.mydiv2{
background-color:green;
width: 20rem;
height: 20rem;
margin: 3rem 3rem;
float: left;

}
@media (min-width:400px) and (max-width:500px) {
.mydiv{
background-color: black;
width: 20rem;
height: 20rem;
margin: 3rem 1rem;
float: left;

}

}
}