关于 @media 媒体查询属性包含很多知识点，这里举个宽度响应式的例子，可以满足各大屏幕尺寸的布局需要。
这里需要说明一点：(响应式的含义：响应式说白了，就是在不同的媒介条件下采用不同的css样式来进行适应各种条件的需要).这里仅仅是个人的理解，有误请不要采纳。
例子的HTML代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>响应式</title>
<link rel="stylesheet" type="text/css" href="responsive.css">
</head>
<body>
<div class="responsive">
<div class="responsive01">超小屏幕</div>
<div class="responsive02">手机端</div>
<div class="responsive03">平板电脑</div>
<div class="responsive04">PC端</div>
<div class="responsive05">超大屏幕</div>
</div>
</body>
</html>
例子的 responsive.css 文件代码:
/*超小屏幕*/
@media (max- 479px) {
.responsive .responsive01 { display: block; }
.responsive .responsive02 { display: none; }
.responsive .responsive03 { display: none; }
.responsive .responsive04 { display: none; }
.responsive .responsive05 { display: none; }
}
/*手机端*/
@media (min- 480px) and (max- 767px) {
.responsive .responsive01 { display: none; }
.responsive .responsive02 { display: block; }
.responsive .responsive03 { display: none; }
.responsive .responsive04 { display: none; }
.responsive .responsive05 { display: none; }
}
/*平板电脑*/
@media (min- 768px) and (max- 979px) {
.responsive .responsive01 { display: none; }
.responsive .responsive02 { display: none; }
.responsive .responsive03 { display: block; }
.responsive .responsive04 { display: none; }
.responsive .responsive05 { display: none; }
}
/*PC端*/
@media (min- 980px) and (max- 1199px) {
.responsive .responsive01 { display: none; }
.responsive .responsive02 { display: none; }
.responsive .responsive03 { display: none; }
.responsive .responsive04 { display: block; }
.responsive .responsive05 { display: none; }
}
/*超大屏幕*/
@media (min- 1200px) {
.responsive .responsive01 { display: none; }
.responsive .responsive02 { display: none; }
.responsive .responsive03 { display: none; }
.responsive .responsive04 { display: none; }
.responsive .responsive05 { display: block; }
}