隨著越來(lái)越多的終端設(shè)備可以連上互聯(lián)網(wǎng)，可以瀏覽網(wǎng)頁(yè)，一個(gè)好的網(wǎng)站便不再只是能夠兼容不同的瀏覽器就可以了，還需要兼容不同的設(shè)備，于是響應(yīng)式網(wǎng)站的概念便應(yīng)運(yùn)而生了。
那么如何開(kāi)發(fā)響應(yīng)式網(wǎng)站呢？

在不斷地實(shí)踐中，我總結(jié)了如下幾個(gè)高效開(kāi)發(fā)響應(yīng)式網(wǎng)站的基本點(diǎn)：

首先，了解實(shí)際分辨率（A）與邏輯分辨率（B）的關(guān)系：
B = A / devicePixelRatio（設(shè)備像素比）

那么，什么是devicePixelRatio？舉例：
假設(shè)有2個(gè)設(shè)備D1、D2，它們的屏幕尺寸是一樣大小的，D1的實(shí)際分辨率是2048*1536px，D2的實(shí)際分辨率是1024*768px，如果D2的devicePixelRatio = 1.0，那么D1的devicePixelRatio必然要等于2.0，不然在同樣的尺寸下面，D1不可能達(dá)到2048*1536px的分辨率。

其次，了解面向移動(dòng)APP以及網(wǎng)頁(yè)設(shè)計(jì)的區(qū)別。

在設(shè)計(jì)APP的時(shí)候，采用的分辨率是設(shè)備實(shí)際的分辨率，因?yàn)锳PP是安裝在設(shè)備上的，是封閉的，比如安裝在手機(jī)上，我們不能通過(guò)PC去訪問(wèn)它。

而如果是網(wǎng)頁(yè)設(shè)計(jì)，那么是跨設(shè)備，跨平臺(tái)的，所以我們需要統(tǒng)一到邏輯分辨率這個(gè)角度去考慮。

1、全局處理觸屏與非觸屏的區(qū)分
這個(gè)主要是對(duì)鼠標(biāo)效果與事件的處理。

2、全局考慮設(shè)備像素比
這個(gè)主要是對(duì)圖片與字體的處理。

3、全局設(shè)計(jì)屏幕尺寸區(qū)間的劃分
通常會(huì)劃分為4個(gè)區(qū)間，小屏、中屏、大屏、超大屏，3個(gè)臨界點(diǎn)的值一般是700多像素，900多像素，1200多像素。
另外需要注意的是，PC中瀏覽器窗口有滾動(dòng)條，CSS中與JS中屏幕的寬度會(huì)有滾動(dòng)條寬度之差。

4、CSS代碼書(shū)寫(xiě)的順序
小屏、中屏、大屏、超大屏，哪個(gè)作為標(biāo)準(zhǔn)，就先寫(xiě)哪個(gè)區(qū)間的代碼。然后是區(qū)間尺寸從小到大依次書(shū)寫(xiě)。

5、JS代碼書(shū)寫(xiě)的順序

先初始化設(shè)置及處理元素，然后是事件處理，最后是窗口尺寸變化處理。

成都網(wǎng)站建設(shè) http://jinyejixie.com/

分享文章：開(kāi)發(fā)響應(yīng)式網(wǎng)站的幾個(gè)基本點(diǎn)
分享網(wǎng)址：http://jinyejixie.com/news/77173.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有響應(yīng)式網(wǎng)站等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)