15621857753

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

来源:齐鲁建站 栏目:开发教程 阅读: 日期:2020-08-30

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

一、bootstrapV4的分法

1、大屏桌面:≥1200px;

2、一般桌面:≥992px;

3、平板:≥768px;

4、手机:≥576px;

5、超小手机:≤576px;

二、最基本的分法(一般项目就满足了,再多就增加代码量了)

// 公共样式部分

@media (min-width: 992px){
  // 电脑
}

@media (max-width: 992px) and (min-width: 768px){
  // 平板
}

@media (max-width: 768px){
  // 手机端
}

三、最全面的分法(用户量特别大的项目,设备多,分的更细些,代码量最大了)

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: 1760px) {
.main .main1 { display: none; }
.main .main2 { display: none; }
.main .main3 { display: none; }
.main .main4 { display: none; }
.main .main5 { display: block; }
}
/*超大屏*/
@media (max-width: 1600px) {
.main .main1 { display: none; }
.main .main2 { display: none; }
.main .main3 { display: none; }
.main .main4 { display: none; }
.main .main5 { display: block; }
}
/*大屏幕*/
@media (max-width: 1440px) {
.main .main1 { display: none; }
.main .main2 { display: none; }
.main .main3 { display: none; }
.main .main4 { display: none; }
.main .main5 { display: block; }
}
/*电脑端*/
@media (max-width: 1280px) {
.main .main1 { display: none; }
.main .main2 { display: none; }
.main .main3 { display: none; }
.main .main4 { display: none; }
.main .main5 { display: block; }
}
/*平板端*/
@media (max-width: 992px) {
.main .main1 { display: none; }
.main .main2 { display: none; }
.main .main3 { display: none; }
.main .main4 { display: none; }
.main .main5 { display: block; }
}
/*手机端*/
@media (max-width: 768px) {
.main .main1 { display: none; }
.main .main2 { display: block; }
.main .main3 { display: none; }
.main .main4 { display: none; }
.main .main5 { display: none; }
}
/*小屏幕*/
@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 (max-width: 279px) {
.main .main1 { display: block; }
.main .main2 { display: none; }
.main .main3 { display: none; }
.main .main4 { display: none; }
.main .main5 { display: none; }
}
展开