站长学院
CMS建站教程 SEO优化攻略
来源:齐鲁建站 栏目:开发教程 阅读: 日期: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; }}