開發響應式網站的幾個基本點
2018-03-14 分類： 響應式網站
隨著越來越多的終端設備可以連上互聯網，可以瀏覽網頁，一個好的網站便不再只是能夠兼容不同的瀏覽器就可以了，還需要兼容不同的設備，于是響應式網站的概念便應運而生了。
那么如何開發響應式網站呢？
在不斷地實踐中，我總結了如下幾個高效開發響應式網站的基本點：
首先，了解實際分辨率（A）與邏輯分辨率（B）的關系：
B = A / devicePixelRatio（設備像素比）
那么，什么是devicePixelRatio？舉例：
假設有2個設備D1、D2，它們的屏幕尺寸是一樣大小的，D1的實際分辨率是2048*1536px，D2的實際分辨率是1024*768px，如果D2的devicePixelRatio = 1.0，那么D1的devicePixelRatio必然要等于2.0，不然在同樣的尺寸下面，D1不可能達到2048*1536px的分辨率。
其次，了解面向移動APP以及網頁設計的區別。
在設計APP的時候，采用的分辨率是設備實際的分辨率，因為APP是安裝在設備上的，是封閉的，比如安裝在手機上，我們不能通過PC去訪問它。
而如果是網頁設計，那么是跨設備，跨平臺的，所以我們需要統一到邏輯分辨率這個角度去考慮。
1、全局處理觸屏與非觸屏的區分
這個主要是對鼠標效果與事件的處理。
2、全局考慮設備像素比
這個主要是對圖片與字體的處理。
3、全局設計屏幕尺寸區間的劃分
通常會劃分為4個區間，小屏、中屏、大屏、超大屏，3個臨界點的值一般是700多像素，900多像素，1200多像素。
另外需要注意的是，PC中瀏覽器窗口有滾動條，CSS中與JS中屏幕的寬度會有滾動條寬度之差。
4、CSS代碼書寫的順序
小屏、中屏、大屏、超大屏，哪個作為標準，就先寫哪個區間的代碼。然后是區間尺寸從小到大依次書寫。
5、JS代碼書寫的順序
先初始化設置及處理元素，然后是事件處理，最后是窗口尺寸變化處理。
成都網站建設 http://m.newbst.com/
新聞標題：開發響應式網站的幾個基本點
分享網址：http://m.newbst.com/news23/77173.html
網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有響應式網站等
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
猜你還喜歡下面的內容
- 響應式網站設計有哪些規則和技巧 2018-03-14
- 成都響應式網站建設的四點要求 2018-02-20
- 創新互聯建議響應式網站建設要注意什么 2018-01-31
- 一個好的H5響應式網站有什么標準呢 2018-01-11
- 響應式網站有什么特征 2017-12-29
- 成都響應式網站建設的好處多多 2017-11-05
- 成都響應式網站建設的注意事項 2017-11-01
- 什么是成都的響應式網站設計 2017-10-14
- 一個響應式網站設計對企業有什么好處 2018-01-09
- 成都響應式網站建設的幾大注意事項 2017-12-28
- 響應式網站制作成本比普通網站要高 2017-12-09
- 哪些類型的網站適合做響應式網站建設 2017-11-16
- 成都響應式網站建設哪家好 2017-11-01
- 成都響應式網站建設事項 2017-10-28
- 成都響應式網站對網站優化有影響嗎？ 2017-10-14
- 響應式網站制作：不可忽視的環節 2017-09-04
- 成都網站建設|為什么就要做響應式網站 和手機網站有什么不同 2017-09-03
- 響應式網站建設優勢 2017-08-27
- 企業建站選擇成都響應式網站開發的三大優勢 2017-08-21