隨著移動和跨屏時代的來臨，響應式網(wǎng)頁越來越重要，通過網(wǎng)頁制作，使得不同設備、分辨率的網(wǎng)站都有好的視覺體驗。rGD北京網(wǎng)站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

需要先有大屏幕和小屏幕兩版的設計稿，或者超大屏幕、大屏幕和小屏幕三屏。rGD北京網(wǎng)站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

rGD北京網(wǎng)站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

rGD北京網(wǎng)站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

rGD北京網(wǎng)站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

除了智能手機之外，使用平板電腦甚至是電視機進行上網(wǎng)的用戶也在持續(xù)增加。在這種形勢下，怎樣讓我們的網(wǎng)站盡量兼容各種類型的設備，并確保優(yōu)良的用戶體驗，這將是越來越重要的問題。rGD北京網(wǎng)站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

通過響應式的設計開發(fā)方式，我們可以使網(wǎng)站頁面隨瀏覽設備的不同而自行響應，動態(tài)的調(diào)整布局結構、元素規(guī)格樣式，將相同的內(nèi)容以不同的格式呈現(xiàn)給不同設備的用戶。rGD北京網(wǎng)站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

將兩屏所需的圖片，用photoshop分別切出來，保存在兩個文件夾，方便管理，每一個版本只會調(diào)用對應版本圖片。rGD北京網(wǎng)站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

meta頭部設置參數(shù)，根據(jù)設備分辨率讓瀏覽器的可視寬度來適應。rGD北京網(wǎng)站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

進入html框架部分，多版本元素一致情況下，按照其中一個版本添加html的Dom元素即可。若有差異的話，也要在對應的位置，添加Dom元素，后續(xù)通過css或者js使該部分隱藏。rGD北京網(wǎng)站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

進入CSS編寫部分，個人習慣是從大屏幕往小屏幕編寫的，因為大版本通常包含的元素比小版本要多。rGD北京網(wǎng)站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

CSS使用媒介查詢-Media Queries方法進行編寫，分別寫不同版本的CSS樣式。rGD北京網(wǎng)站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

由于媒介查詢的方法，并不適應低版本的瀏覽器，需要加入JS去幫助兼容，以下JS可上網(wǎng)下載。需要注意點是此JS一般需要跟網(wǎng)站的index.html放在同一個目錄下，不適合分開管理，否則無法加載圖片或者樣式。rGD北京網(wǎng)站設計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)