最近遇到一個(gè)需求，做一個(gè)有底部導(dǎo)航的頁(yè)面，頁(yè)面上的內(nèi)容要求一屏展示（盡量不要有滾動(dòng)），同時(shí)還要兼容1366768 、1440900、1920*1080這些屏幕，能不能用代碼來(lái)實(shí)現(xiàn)呢？首先底部的導(dǎo)航欄只要將頂部的導(dǎo)航欄用定位定在頁(yè)面的底部就可以了。（導(dǎo)航欄可以再菜鳥(niǎo)聯(lián)盟中查到*各種的都有）然后，兼容1366768 、1440900、1920*1080這些屏幕的話一般就是寫媒體查詢用三個(gè)節(jié)點(diǎn)就可以了媒體查詢的具體代碼為： @media screen and (min-width: 1000px) and (max-width:1367px){/*兼容1366*768*/
.body{ background: #000;
}/*這里是樣式*/
}
@media screen and (min-width: 1367px) and (max-width:1441px){/*兼容1440*900*/
.body{ background: #000;
}/*這里是樣式*/
}
@media screen and (min-width: 1441px) and (max-width:1920px){/*兼容1920*1080*/
.body{ background: #000;
}/*這里是樣式*/
}
2 回答
慕無(wú)忌1623718
TA貢獻(xiàn)1744條經(jīng)驗(yàn) 獲得超4個(gè)贊
首先底部的導(dǎo)航欄將頂部的用相對(duì)定位position:fixed;定位在頁(yè)面的底部就可以了。導(dǎo)航欄可以到菜鳥(niǎo)聯(lián)盟查到*各種的都有
其次是要兼容1366768 、1440900、1920*1080這些屏幕一般使用媒體查詢
具體代碼如下：
@media screen and (min-width: 1000px) and (max-width:1367px){/*兼容1366*768*/
.body{ background: #000;
}/*這里是樣式*/
}
@media screen and (min-width: 1367px) and (max-width:1441px){/*兼容1440*900*/
.body{ background: #000;
}/*這里是樣式*/
}
@media screen and (min-width: 1441px) and (max-width:1920px){/*兼容1920*1080*/
.body{ background: #000;
}/*這里是樣式*/
}- 2 回答
- 0 關(guān)注
- 1313 瀏覽
添加回答
舉報(bào)
0/150
提交
取消