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