自移動(dòng)互聯(lián)網(wǎng)開始普及以來，已發(fā)展15年，在企業(yè)網(wǎng)站建設(shè)領(lǐng)域，采用響應(yīng)式布局技術(shù)的自適應(yīng)已基本取代了獨(dú)立手機(jī)站點(diǎn)并成為主流。據(jù)藝瓊網(wǎng)絡(luò)2014年的統(tǒng)計(jì)報(bào)告，在新建設(shè)的企業(yè)網(wǎng)站中，100%采用了自適應(yīng)?？v觀國內(nèi)網(wǎng)站建設(shè)行業(yè)，除了早期已上線的手機(jī)獨(dú)立站，新上線的網(wǎng)站超過98%均采用了自適應(yīng)。為何自適應(yīng)建站如使受到廣大網(wǎng)站建設(shè)公司和用戶的歡迎？這得益于HTML5和CSS3的出現(xiàn)，也是實(shí)現(xiàn)響應(yīng)式布局技術(shù)的基石。
2001年5月23日CSS3標(biāo)準(zhǔn)草案正式發(fā)布、2014年10月28日HTML5標(biāo)準(zhǔn)正式發(fā)布后，各瀏覽陸續(xù)對HTML5和CSS3予以支持。而對于自適應(yīng)的普及，CSS3中的@media起到了重要的作用，它能夠根據(jù)不同終端設(shè)備的屏幕分辨率，提供不同的CSS樣式，從而改變網(wǎng)頁的排版，由于根據(jù)屏幕分辨率變化而變化，故稱為響應(yīng)式布局。基于此，同一套代碼實(shí)現(xiàn)多個(gè)終端設(shè)備的訪問成為了可能。以下列CSS代碼為例：
.box {width: 20%;}
@media(max-width:1500px){
.box {width: 25%;}
}@media(max-width:1200px){
.box {width: 33.33%;}
}@media(max-width:750px){
.box {width: 50%;}
}@media(max-width:480px){
.box {width: 100%;}
}
樣式.box正常情況下顯示寬度為父元素的20%，而當(dāng)屏幕寬度小于1500像素時(shí)，.box的寬度自動(dòng)改變?yōu)楦冈貙挾鹊?5%。依此類推，當(dāng)屏幕寬度小于480像素時(shí)，.box的寬度自動(dòng)改變?yōu)楦冈貙挾鹊?00%。從而實(shí)現(xiàn)了從電腦、平板到手機(jī)的全覆蓋，在不同設(shè)備下，能顯示為不同的樣式。于是，自適應(yīng)就實(shí)現(xiàn)了。
細(xì)心的朋友在瀏覽網(wǎng)站時(shí)可能已經(jīng)發(fā)現(xiàn)，過去訪問電腦版用https://www.news.jyspkj.cn，訪問手機(jī)版用https://m.news.jyspkj.cn，是2個(gè)不同的子域名，這是因?yàn)樵O(shè)計(jì)了2個(gè)完全獨(dú)立的版面，一個(gè)電腦版和一個(gè)手機(jī)版。而現(xiàn)在，只需要開發(fā)一套代碼，訪問網(wǎng)站也只需https://www.news.jyspkj.cn即可。這樣理解可能會(huì)更通俗易懂一些，當(dāng)用戶用腦訪問時(shí)，自動(dòng)顯示為電腦版，當(dāng)用戶用手機(jī)訪問時(shí)，自動(dòng)顯示為手機(jī)版，當(dāng)然，也包括其他不同尺寸設(shè)備的版本。
采用響應(yīng)式布局技術(shù)的自適應(yīng)網(wǎng)站，相較于傳統(tǒng)的獨(dú)立手機(jī)站，具有十明明顯的優(yōu)勢：
由于自適應(yīng)依賴于同一套代碼，而獨(dú)立手機(jī)站有獨(dú)立的一套代碼，不受約束，可以設(shè)計(jì)出與電腦版完全不同的排版設(shè)計(jì)，所以，在個(gè)性化方面的確不如獨(dú)立站點(diǎn)。對于極少數(shù)追求個(gè)性化手機(jī)版的網(wǎng)站，獨(dú)立手機(jī)站仍有一席之地。
自適應(yīng)其實(shí)在幾乎所有種類的網(wǎng)站中都得到廣泛應(yīng)用，只是在企業(yè)網(wǎng)站、外貿(mào)網(wǎng)站中的應(yīng)用更為常見而已。如同4G、5G一樣，自適應(yīng)給互聯(lián)網(wǎng)帶來了重大的變革，為移動(dòng)互聯(lián)網(wǎng)的普及提供了重要的基礎(chǔ)保障。
