Media Query实现响应式布局

第一步 ：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;

}

}

完整代码截图如下：