設(shè)為首頁(yè) | 加為收藏 | 聯(lián)系我們 咨詢(xún)熱線:0632-5272123
電 話:0632-5272123
傳 真:0632-5271123
地 址: 棗莊市文化西路23號(hào)
E-mail:zzint@zzint.com
  • 技術(shù)咨詢(xún):
  • 業(yè)務(wù)咨詢(xún):
  • 客戶(hù)服務(wù):
  • 服務(wù)監(jiān)督:
詳細(xì)資料 您當(dāng)前的位置:網(wǎng)站首頁(yè)新聞動(dòng)態(tài)詳細(xì)資料

制作響應(yīng)式網(wǎng)頁(yè)步驟和參數(shù)設(shè)置

  隨著移動(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)榇蟀姹就ǔ0脑乇刃“姹疽唷?/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ì)
版權(quán)所有 棗莊市英特信息網(wǎng)絡(luò)有限公司 ◎2017
聯(lián)系電話:0632-5271123 5272123  總部地址:棗莊市市中區(qū)文化西路23號(hào)
魯ICP備09021689號(hào) 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證編號(hào):魯 B2-20080087號(hào)