手机,平板,电脑,超大屏幕 宽度响应式

关于 @media 媒体查询属性包含很多知识点，这里举个宽度响应式的例子，可以满足各大屏幕尺寸的布局需要。

这里需要说明一点：(响应式的含义：响应式说白了，就是在不同的媒介条件下采用不同的css样式来进行适应各种条件的需要).这里仅仅是个人的理解，有误请不要采纳。

例子的HTML代码:

例子的 responsive.css 文件代码:

/*超小屏幕*/
@media (max-width: 479px) {
.responsive .responsive01 { display: block; }
.responsive .responsive02 { display: none; }
.responsive .responsive03 { display: none; }
.responsive .responsive04 { display: none; }
.responsive .responsive05 { display: none; }
}

/*手机端*/
@media (min-width: 480px) and (max-width: 767px) {
.responsive .responsive01 { display: none; }
.responsive .responsive02 { display: block; }
.responsive .responsive03 { display: none; }
.responsive .responsive04 { display: none; }
.responsive .responsive05 { display: none; }
}

/*平板电脑*/
@media (min-width: 768px) and (max-width: 979px) {
.responsive .responsive01 { display: none; }
.responsive .responsive02 { display: none; }
.responsive .responsive03 { display: block; }
.responsive .responsive04 { display: none; }
.responsive .responsive05 { display: none; }
}

/*PC端*/
@media (min-width: 980px) and (max-width: 1199px) {
.responsive .responsive01 { display: none; }
.responsive .responsive02 { display: none; }
.responsive .responsive03 { display: none; }
.responsive .responsive04 { display: block; }
.responsive .responsive05 { display: none; }
}

/*超大屏幕*/
@media (min-width: 1200px) {
.responsive .responsive01 { display: none; }
.responsive .responsive02 { display: none; }
.responsive .responsive03 { display: none; }
.responsive .responsive04 { display: none; }
.responsive .responsive05 { display: block; }
}