HTML代码：

<div class="main">

<div class="main1">超小屏幕</div>

<div class="main2">手机端</div>

<div class="main3">平板电脑</div>

<div class="main4">PC端</div>

<div class="main5">超大屏幕</div>

</div> 

CSS代码：

/*超小屏幕*/

@media (max-width: 479px) {

.main .main1 { display: block; }

.main .main2 { display: none; }

.main .main3 { display: none; }

.main .main4 { display: none; }

.main .main5 { display: none; }

}

/*手机端*/

@media (min-width: 480px) and (max-width: 767px) {

.main .main1 { display: none; }

.main .main2 { display: block; }

.main .main3 { display: none; }

.main .main4 { display: none; }

.main .main5 { display: none; }

}

/*平板电脑*/

@media (min-width: 768px) and (max-width: 979px) {

.main .main1 { display: none; }

.main .main2 { display: none; }

.main .main3 { display: block; }

.main .main4 { display: none; }

.main .main5 { display: none; }

}

/*PC端*/

@media (min-width: 980px) and (max-width: 1199px) {

.main .main1 { display: none; }

.main .main2 { display: none; }

.main .main3 { display: none; }

.main .main4 { display: block; }

.main .main5 { display: none; }

}

/*超大屏幕*/

@media (min-width: 1200px) {

.main .main1 { display: none; }

.main .main2 { display: none; }

.main .main3 { display: none; }

.main .main4 { display: none; }

.main .main5 { display: block; }

}