响应式网站关于手机/平板/电脑的CSS尺寸设置

最近在弄响应式网站，一直琢磨着尺寸的问题，找了不少资料，各种说法都有，最终确定一个模式，记录于此。

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; }

}