隨著移動(dòng)和跨屏?xí)r代的來(lái)臨，響應(yīng)式網(wǎng)頁(yè)越來(lái)越重要，通過(guò)網(wǎng)頁(yè)制作，使得不同設(shè)備、分辨率的網(wǎng)站都有好的視覺(jué)體驗(yàn)。那就前端方面，該怎么才能制作一個(gè)響應(yīng)式網(wǎng)頁(yè)呢？小編談?wù)勴憫?yīng)式網(wǎng)頁(yè)制作方法和關(guān)鍵參數(shù)設(shè)置：
  1、需要先有大屏幕和小屏幕兩版的設(shè)計(jì)稿，或者超大屏幕、大屏幕和小屏幕三屏，以下圖片是兩屏設(shè)計(jì)，適應(yīng)PC端和移動(dòng)端。
  2、將兩屏所需的圖片，用photoshop分別切出來(lái)，保存在兩個(gè)文件夾，方便管理，每一個(gè)版本只會(huì)調(diào)用對(duì)應(yīng)版本圖片。
  3、meta頭部設(shè)置參數(shù)，根據(jù)設(shè)備分辨率讓瀏覽器的可視寬度來(lái)適應(yīng)。
  
  4、進(jìn)入html框架部分，多版本元素一致情況下，按照其中一個(gè)版本添加html的Dom元素即可。若有差異的話，也要在對(duì)應(yīng)的位置，添加Dom元素，后續(xù)通過(guò)css或者js使該部分隱藏。
  5、進(jìn)入CSS編寫(xiě)部分，個(gè)人習(xí)慣是從大屏幕往小屏幕編寫(xiě)的，因?yàn)榇蟀姹就ǔ０�含的元素比小版本要多�?/span>
  6、CSS使用媒介查詢(xún)-Media Queries方法進(jìn)行編寫(xiě)，分別寫(xiě)不同版本的CSS樣式。

  7、由于媒介查詢(xún)的方法，并不適應(yīng)低版本的瀏覽器，需要加入JS去幫助兼容，以下JS可上網(wǎng)下載。需要注意點(diǎn)是此JS一般需要跟網(wǎng)站的index.html放在同一個(gè)目錄下，不適合分開(kāi)管理，否則無(wú)法加載圖片或者樣式。

上篇文章：中國(guó)互聯(lián)網(wǎng)經(jīng)濟(jì)正從量變走向質(zhì)變
下篇文章：從客戶(hù)角度看web設(shè)計(jì)