如何制作自適應(yīng)網(wǎng)頁網(wǎng)站（CSS3 Media Queries）
2018-11-01 來源：學(xué)做網(wǎng)站論壇
什么是自適應(yīng)網(wǎng)頁
隨著網(wǎng)站瀏覽設(shè)備屏幕大小不同（包括PC,IPAD,手機等瀏覽設(shè)備），為了適應(yīng)不同的屏幕，做網(wǎng)站制作時可以自動根據(jù)瀏覽網(wǎng)站的屏幕尺寸來顯示不同的網(wǎng)頁布局的網(wǎng)站�！鞠嚓P(guān)知識：怎么做手機網(wǎng)站？】
自適應(yīng)網(wǎng)頁網(wǎng)站的制作
要想自己做一個自適應(yīng)網(wǎng)頁網(wǎng)站并不是什么難事，只需以下三步就可以輕松實現(xiàn)。
第一步：在標(biāo)簽上面加入viewport meta標(biāo)簽來設(shè)定。以下viewport meta標(biāo)簽告訴瀏覽器視口寬度等于設(shè)備屏幕寬度，且不進行初始縮放：
第二步： HTML結(jié)構(gòu)
在這個例子中，頁面布局包括 header，content，sidebar和footer。header固定高度為180px，content寬600px，sidebar寬300px。
第三步：在CSS文件中添加Media Queries
CSS3 media query是自適應(yīng)網(wǎng)頁設(shè)計的關(guān)鍵，他就像高級語言里的if條件語句，告訴瀏覽器根據(jù)不同的視口寬度（這里等于瀏覽器寬度）來渲染網(wǎng)頁。（學(xué)習(xí)更多CSS知識，請學(xué)習(xí)這里的CSS視頻教程。）
如果視口寬度小于等于980px，下面規(guī)則生效。這里將容器絕對寬度改用百分比顯示，讓頁面排版更加靈活。
@media screen and (max-width: 980px) {
#pagewrap{
?width: 94%;
?}
?#content{
?width: 65%;
?}
?#sidebar{
?width: 30%;
?}
}
如果視口寬度小于等于700px， 將#content和#sidebar寬度設(shè)為自動(auto)，并移除它的浮動屬性(float)，這樣它會變成滿版顯示。
@media screen and (max-width:700px) {
#content {
?width: auto;
?float: none;
?}
?#sidebar {
?width: auto;
?float: none;
?}
}
當(dāng)視口寬度小于等于480px時（如手機屏幕），將#header高度設(shè)為自動，h1的字體大小設(shè)定為24px，并隱藏#sidebar。
@media screen and (max-width:480px) {
#header {
?height: auto;
?}
?h1 {
?font-size: 24px;
?}
?#sidebar {
?display: none;
?}
}
根據(jù)你的喜好，可以定義更多的media queriey條件。
標(biāo)簽： isp 網(wǎng)站的制作 網(wǎng)站制作
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
