淺談響應(yīng)式網(wǎng)站開(kāi)發(fā)

　　隨著互聯(lián)網(wǎng)的發(fā)展，各種移動(dòng)終端層出不窮，門(mén)戶網(wǎng)站也不再局限于在電腦上顯示了，現(xiàn)如今的網(wǎng)站越來(lái)越多的考慮各個(gè)終端的兼容性了。

　　在以前做一個(gè)門(mén)戶網(wǎng)站，只需要考慮臺(tái)式電腦的顯示情況和在筆記本上的顯示情況就ok了，這里說(shuō)的筆記本一般指屏幕分辨率為1366px，一般這種網(wǎng)站，設(shè)計(jì)師可以隨心所欲的發(fā)揮自己的設(shè)計(jì)思維，天馬行空，因?yàn)榫窒掭^小。而現(xiàn)在，越來(lái)越多的網(wǎng)站追求響應(yīng)式彈性布局，想要兼容更多的終端，如：小屏尺寸的筆記本、ipad、手機(jī)等，這些終端由于實(shí)際屏幕不及臺(tái)式電腦廣闊，所以對(duì)設(shè)計(jì)師的要求就有點(diǎn)多了，設(shè)計(jì)這樣的網(wǎng)站，需要考慮在PC端的顯示風(fēng)格，到ipad端的顯示風(fēng)格，到手機(jī)上的顯示風(fēng)格，就需要設(shè)計(jì)的更有操作空間，不能再像之前一樣只考慮到PC端的界面就行了。這也就需要設(shè)計(jì)師設(shè)計(jì)頁(yè)面時(shí)給頁(yè)面的元素模塊更多的操作空間。

　　在設(shè)計(jì)師設(shè)計(jì)好頁(yè)面之后，就是前端工程師接手進(jìn)行頁(yè)面開(kāi)發(fā)，將網(wǎng)站頁(yè)面設(shè)計(jì)稿轉(zhuǎn)化為html文件，運(yùn)用p+css進(jìn)行頁(yè)面布局，在做響應(yīng)式網(wǎng)站頁(yè)面時(shí)，也要考慮如何布局更加簡(jiǎn)約，以更少的代碼實(shí)現(xiàn)兼容各個(gè)終端的頁(yè)面布局。而在進(jìn)行響應(yīng)式頁(yè)面開(kāi)發(fā)的時(shí)候，第一件事情就是在頁(yè)面代碼頭部添加以下代碼設(shè)置屏幕按照1：1的尺寸顯示，在iPad和手機(jī)的瀏覽器上也能讓網(wǎng)站全視圖瀏覽，并且禁止用戶縮放網(wǎng)站頁(yè)面。

　　代碼如下：

　　metaname=viewportcontent=width=device-width，initial-scale=1，maximum-scale=1，user-scalable=nometahttp-equiv=X-UA-Compatiblecontent=IE=edge，chrome=1

　　添加以上代碼后，對(duì)于各個(gè)終端的兼容性調(diào)整則需要在CSS文件中運(yùn)用媒體查詢來(lái)設(shè)置頁(yè)面在各個(gè)終端上的實(shí)際顯示樣式。如下：

　　@mediascreenand(max-width：980px){

　　}

　　這里聲明的是在瀏覽器寬度小于等于980px的時(shí)候，網(wǎng)站顯示調(diào)用這個(gè)區(qū)間里的樣式進(jìn)行布局。

　　響應(yīng)式網(wǎng)站應(yīng)該兼容各個(gè)終端，大致的終端尺寸為：pc（1366px），筆記本（1024px-1366px)，ipad(768px-1024px)，手機(jī)（768px）。

　　當(dāng)然，有些頁(yè)面模塊不是十分規(guī)律的就需要根據(jù)實(shí)際情況來(lái)寫(xiě)一些特殊分辨率下的顯示樣式了。