網頁美工設計

自適應網頁設計制作的方法和技巧

編輯：時間：2017-05-04 21:54:44

　　隨著越來越多的人使用手機上網，使自適應網頁設計技術變得越來越流行。自適應網頁設計指能使網頁自適應顯示在不同大小終端設備上新網頁設計方式及技術。當然，對一個新手來說可能聽起來有點復雜，其實它比你想象的簡單多了（前提你有css基礎）。

　　你要做一個自適應網站，首先你要了解什么是自適應布局。自適應布局就是一個網站能兼容適配多個終端，不需要再為每個終端做一個特定的版本。省去了其他終端重新開放的麻煩。一個自適應網站的建設，首先你做的是網頁的設計，一個網站是通過多個網頁搭建而成的。自適應網頁設計你需要做的是：1、允許網頁寬度自動調整。2、相對大小的字體。3、不能使用絕對寬度。4、流動布局。

　　響應式網頁設計優勢：流體網格的網站適合響應式網頁設計。

　　1、靈活性強，可以一個網站兼容多個不同終端;

　　2、方便快捷的解決多設備顯示適應問題;

　　雖然響應式/自適應網頁設計會帶來兼容各種設備，但是它也有缺點，工作量大、代碼累贅、加載時間長，它們能“一次設計，普遍適用”，可以根據屏幕分辨率自適應以及自動縮放圖片、自動調整布局，它們不只是技術的實現，更多的是對于設計的全新思維模式。對于這些缺點，然而后面的技術給響應式問題進行了優化。

　　1、在HTML頭部增加viewport標簽。在網站HTML文件的開頭，增加viewportmeta標簽告訴瀏覽器視口寬度等于設備屏幕寬度，且不進行初始縮放。代碼如下：

　　這段代碼支持Chrome、Firefox、IE9以上的瀏覽器，但不支持IE8以及低于IE8的瀏覽器。

　　2、在CSS文件尾部增加針對不同屏幕分辨率的規則。例如使用如下的代碼，可以讓屏幕寬度低于480像素的設備（如iPhone等），網頁側欄隱藏中部內容欄寬度自動調節。

　　@mediascreenand(max-device-width:480px){

　　#divMain{

　　float:none;

　　width:auto;

　　}