Media Query实现响应式布局
2017-05-26 本文已影响0人
温室寻荒凉
第一步 ：head标签里加上viewport的meta标签，即
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
第二步：需要样式响应的元素加个css选择用的class，当然，任何选择器都可以，例如
<div class="width-query">sssssssssssssssssss</div>
第三步：在style里面加入下语句，
/*屏幕可视区域像素大于1700px时*/
@media screen and (min-width: 1700px){
.width-query{
margin-left: 300px;
color: red;
font-size: 35px;
}
}
/*屏幕可视区域像素大于800px 同时小于1700px时*/
@media screen and (min-width: 800px) and (max-width: 1700px){
.width-query{
margin-left: 200px;
color: yellow;
font-size: 25px;
}
}
/*屏幕可视区域像素小于800px时*/
@media screen and (max-width: 800px){
.width-query{
margin-left: 100px;
color: blue;
font-size: 15px;
}
}
完整代码截图如下：
