自移動互聯(lián)網(wǎng)開始普及以來，已發(fā)展15年，在企業(yè)網(wǎng)站建設(shè)領(lǐng)域，采用響應(yīng)式布局技術(shù)的自適應(yīng)已基本取代了獨立手機站點并成為主流。據(jù)藝瓊網(wǎng)絡(luò)2014年的統(tǒng)計報告，在新建設(shè)的企業(yè)網(wǎng)站中，100%采用了自適應(yīng)。縱觀國內(nèi)網(wǎng)站建設(shè)行業(yè)，除了早期已上線的手機獨立站，新上線的網(wǎng)站超過98%均采用了自適應(yīng)。為何自適應(yīng)建站如使受到廣大網(wǎng)站建設(shè)公司和用戶的歡迎？這得益于HTML5和CSS3的出現(xiàn)，也是實現(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)式布局。基于此，同一套代碼實現(xiàn)多個終端設(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像素時，.box的寬度自動改變?yōu)楦冈貙挾鹊?5%。依此類推，當(dāng)屏幕寬度小于480像素時，.box的寬度自動改變?yōu)楦冈貙挾鹊?00%。從而實現(xiàn)了從電腦、平板到手機的全覆蓋，在不同設(shè)備下，能顯示為不同的樣式。于是，自適應(yīng)就實現(xiàn)了。
細(xì)心的朋友在瀏覽網(wǎng)站時可能已經(jīng)發(fā)現(xiàn)，過去訪問電腦版用https://www.aueha.cn，訪問手機版用https://m.aueha.cn，是2個不同的子域名，這是因為設(shè)計了2個完全獨立的版面，一個電腦版和一個手機版。而現(xiàn)在，只需要開發(fā)一套代碼，訪問網(wǎng)站也只需https://www.aueha.cn即可。這樣理解可能會更通俗易懂一些，當(dāng)用戶用腦訪問時，自動顯示為電腦版，當(dāng)用戶用手機訪問時，自動顯示為手機版，當(dāng)然，也包括其他不同尺寸設(shè)備的版本。
采用響應(yīng)式布局技術(shù)的自適應(yīng)網(wǎng)站，相較于傳統(tǒng)的獨立手機站，具有十明明顯的優(yōu)勢：
由于自適應(yīng)依賴于同一套代碼，而獨立手機站有獨立的一套代碼，不受約束，可以設(shè)計出與電腦版完全不同的排版設(shè)計，所以，在個性化方面的確不如獨立站點。對于極少數(shù)追求個性化手機版的網(wǎng)站，獨立手機站仍有一席之地。
自適應(yīng)其實在幾乎所有種類的網(wǎng)站中都得到廣泛應(yīng)用，只是在企業(yè)網(wǎng)站、外貿(mào)網(wǎng)站中的應(yīng)用更為常見而已。如同4G、5G一樣，自適應(yīng)給互聯(lián)網(wǎng)帶來了重大的變革，為移動互聯(lián)網(wǎng)的普及提供了重要的基礎(chǔ)保障。
