当前位置:首页 > 站长学院 > 建站教程 >

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

作者:齐鲁建站    发布时间:2020-08-30    阅读:
最近在弄响应式网站,一直琢磨着尺寸的问题,找了不少资料,各种说法都有,最终确定一个模式,记录于此。

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; }
}
QQ客服
QQ客服
陈经理