快速導(dǎo)航
傳 真：0632-5271123
地 址： 棗莊市文化西路23號(hào)
E-mail：zzint@zzint.com
- 技術(shù)咨詢：
- 業(yè)務(wù)咨詢：
- 客戶服務(wù)：
- 服務(wù)監(jiān)督：
制作響應(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編寫部分，個(gè)人習(xí)慣是從大屏幕往小屏幕編寫的，因?yàn)榇蟀姹就ǔ０脑乇刃“姹疽唷?/span>
6、CSS使用媒介查詢-Media Queries方法進(jìn)行編寫，分別寫不同版本的CSS樣式。
7、由于媒介查詢的方法，并不適應(yīng)低版本的瀏覽器，需要加入JS去幫助兼容，以下JS可上網(wǎng)下載。需要注意點(diǎn)是此JS一般需要跟網(wǎng)站的index.html放在同一個(gè)目錄下，不適合分開管理，否則無(wú)法加載圖片或者樣式。
上篇文章：中國(guó)互聯(lián)網(wǎng)經(jīng)濟(jì)正從量變走向質(zhì)變
下篇文章：從客戶角度看web設(shè)計(jì)
聯(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)