&

新聞分類(lèi)

網(wǎng)站 | 自適應(yīng)設(shè)計(jì)是啥？憑啥這么火爆！

2017/04/13| 閱讀次數(shù)：154

自適應(yīng)設(shè)計(jì)這個(gè)概率早在2010年就由著名網(wǎng)頁(yè)設(shè)計(jì)師Ethan Marcotte提出了，指可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)。經(jīng)過(guò)幾年的發(fā)展，自適應(yīng)已經(jīng)席卷前端和設(shè)計(jì)領(lǐng)域成為人們建站的首選，那么自適應(yīng)網(wǎng)站到底有啥魅力，讓它這么火爆呢？

自適應(yīng)網(wǎng)站詳細(xì)的來(lái)說(shuō)，就是通過(guò)集中創(chuàng)建頁(yè)面的圖片排版大小，可以智能地根據(jù)用戶(hù)行為以及使用的設(shè)備環(huán)境（系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等）進(jìn)行相對(duì)應(yīng)的調(diào)整，最大限度滿(mǎn)足不同設(shè)備用戶(hù)體驗(yàn)需求。

那么響應(yīng)式網(wǎng)站到底有什么優(yōu)點(diǎn)呢？

? 1. 從用戶(hù)層面來(lái)說(shuō)，它能適應(yīng)所有設(shè)備，這樣網(wǎng)站在每個(gè)平臺(tái)都有一致的外觀和感受，為用戶(hù)提供非常好的視覺(jué)效果，一致性友好體驗(yàn)；

? 2. 它可以根據(jù)不同終端，不同尺寸和不同應(yīng)用環(huán)境，自動(dòng)調(diào)整界面布局，展示內(nèi)容大小，為用戶(hù)提供非常好的視覺(jué)展示效果，用戶(hù)體驗(yàn)友好；

? 3. 而從后期維護(hù)方面來(lái)看，再不需要分別維護(hù)PC界面、pad界面、移動(dòng)界面，專(zhuān)心維護(hù)一個(gè)網(wǎng)站即可；

? 4. 從SEO優(yōu)化層面來(lái)說(shuō)，由于該設(shè)計(jì)沒(méi)有網(wǎng)頁(yè)版本之分，所以SEO的策略保持一致，另外因?yàn)楦靼姹綰RL地址和HTML是一致的，也便于社交分享以及提升網(wǎng)站對(duì)搜索引擎的友好度，因?yàn)镚oogle也建議優(yōu)先采用自適應(yīng)設(shè)計(jì)，因?yàn)橄嗤腍TML和內(nèi)容，Google最容易處理。

正因?yàn)樽赃m應(yīng)網(wǎng)站存在這些優(yōu)點(diǎn)，所以現(xiàn)在越來(lái)越多的公司或者個(gè)人在建站時(shí)首先考慮的就是自適應(yīng)網(wǎng)站了，那么自適應(yīng)網(wǎng)站是如何實(shí)現(xiàn)的呢，它的實(shí)現(xiàn)方式由多方面決定，包括彈性網(wǎng)格、彈性圖片、CSS媒體查詢(xún)的使用。具體來(lái)說(shuō)：

1）需要在head標(biāo)簽里指定viewport meta屬性。

2）通過(guò)媒介查詢(xún)來(lái)設(shè)置樣式 Media Queries，Media Queries 是自適應(yīng)設(shè)計(jì)的核心。它會(huì)根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁(yè)面。

3）在圖片方面，需要把圖片處理成自適應(yīng)的根據(jù)終端類(lèi)型尺寸分辨率來(lái)適配出合理的圖形。

4）另外pre ，iframe，video 等，都需要和圖片一樣控制好寬度。對(duì)于table，建議不要增加 padding 屬性，低分辨率下使用內(nèi)容居中。

當(dāng)然最重要的是，你還需要前端工程師來(lái)寫(xiě)適配不同屏幕的CSS代碼，對(duì)前端工程師來(lái)說(shuō)，選擇合適的HTML5框架，能夠讓開(kāi)發(fā)工作事半功倍，目前已經(jīng)存在很多HTML 5響應(yīng)式Web開(kāi)發(fā)框架主題，比如說(shuō)：

Bootstrap,Foundation,GroundworkCSS2,Vue,Semantic UI等，后期有機(jī)會(huì)可以為大家詳細(xì)介紹自適應(yīng)開(kāi)發(fā)必備的框架~

當(dāng)然響應(yīng)式網(wǎng)站也有其缺點(diǎn)，比如說(shuō)在老版本瀏覽器（IE6,7,8）上兼容性、靈活性有所欠缺，但是隨著技術(shù)的發(fā)展，這些缺點(diǎn)也在不斷的改進(jìn)，希望大家都能為自適應(yīng)網(wǎng)站的發(fā)展做出推動(dòng)作用。