什么是自適應布局？
自(zi)(zi)適(shi)(shi)應布局簡而(er)言之，就是一個(ge)網站(zhan)或者一個(ge)頁面(mian)能適(shi)(shi)應兼(jian)容多個(ge)終端設備，而(er)不(bu)需要再為(wei)每個(ge)終端做一個(ge)特定的(de)(de)版本。其實(shi)簡單來(lai)講自(zi)(zi)適(shi)(shi)應與(yu)非自(zi)(zi)適(shi)(shi)應的(de)(de)不(bu)同就是一個(ge)頁面(mian)不(bu)管(guan)在(zai)什么設備的(de)(de)分辨(bian)率下都能自(zi)(zi)動識別(bie)適(shi)(shi)應，為(wei)瀏覽的(de)(de)用(yong)戶(hu)帶來(lai)了更好的(de)(de)體驗(yan)效果(guo)。
怎么樣才能(neng)快(kuai)速制(zhi)作一個自適應(ying)網頁？
1、首先(xian)，在網頁代碼的頭部，加入一行(xing)viewport元(yuan)標(biao)簽。
2、由于網(wang)頁(ye)會根據屏幕寬(kuan)度調整布局(ju)，所以不能使用寬(kuan)度的布局(ju)，也(ye)不能使用具(ju)有寬(kuan)度的元(yuan)素。
3、“流動(dong)(dong)布局(ju)”的(de)含(han)義是，各個(ge)區塊的(de)位置都是浮動(dong)(dong)的(de)，不是固定不變的(de)。Float的(de)好(hao)處是，如果寬度太小，放(fang)不下(xia)兩個(ge)元(yuan)素(su)，后面(mian)(mian)的(de)元(yuan)素(su)會自動(dong)(dong)滾(gun)動(dong)(dong)到前面(mian)(mian)元(yuan)素(su)的(de)下(xia)方，不會在水(shui)(shui)平方向overflow(溢(yi)出)，避免了(le)水(shui)(shui)平滾(gun)動(dong)(dong)條的(de)出現。
4、“自適應網頁設(she)計(ji)”的(de)核心(xin)，就是CSS3引入(ru)的(de)Media Query模塊。它的(de)意(yi)思就是，自動探測屏幕(mu)寬度，然后加(jia)載相(xiang)應的(de)CSS文(wen)件。同(tong)一個CSS文(wen)件中，也可以根(gen)據不同(tong)的(de)屏幕(mu)分辨率，選擇應用不同(tong)的(de)CSS規則。
蘇公網安備32030302000492號
