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