正文

怎么寫(xiě)響應(yīng)式網(wǎng)頁(yè)（怎么寫(xiě)響應(yīng)式網(wǎng)頁(yè)文件）

發(fā)布時(shí)間：2023-04-25 14:41:18 稿源：創(chuàng)意嶺閱讀： 126

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于怎么寫(xiě)響應(yīng)式網(wǎng)頁(yè)的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國(guó)，相關(guān)業(yè)務(wù)請(qǐng)撥打175-8598-2043，或微信：1454722008

本文目錄:

1、利用axure進(jìn)行響應(yīng)式自適應(yīng)網(wǎng)站的設(shè)計(jì)
2、如何將web頁(yè)面改成響應(yīng)式
3、如何建設(shè)一個(gè)高質(zhì)量的H5響應(yīng)式網(wǎng)站
4、響應(yīng)式網(wǎng)頁(yè)的設(shè)計(jì)策略有哪些?

怎么寫(xiě)響應(yīng)式網(wǎng)頁(yè)（怎么寫(xiě)響應(yīng)式網(wǎng)頁(yè)文件）

一、利用axure進(jìn)行響應(yīng)式自適應(yīng)網(wǎng)站的設(shè)計(jì)

在axure 8發(fā)布以后，可以利用幾項(xiàng)技術(shù)（axure自動(dòng)生成自適應(yīng)html、前后端分離、響應(yīng)式網(wǎng)站設(shè)計(jì)、restful接口、json或xml等）進(jìn)一步簡(jiǎn)化網(wǎng)站的開(kāi)發(fā)，該設(shè)計(jì)模式的主要流程如下：

1. 產(chǎn)品經(jīng)理利用axure設(shè)計(jì)原型。

2. 原型討論定型后由UI人員設(shè)計(jì)圖標(biāo)，更新到axure原型中。

3. 由axure生成自適應(yīng)的響應(yīng)式網(wǎng)站設(shè)計(jì)的html文件。

參考：http://www.woshipm.com/rp/696039.html

注意：axure發(fā)布項(xiàng)目生成html時(shí)，在左側(cè)的“ 移動(dòng)設(shè)備 ”這個(gè)設(shè)置頁(yè)，需要勾選“包含視口標(biāo)簽”，不勾選“禁止頁(yè)面垂直滾動(dòng)”，寬度設(shè)置為“device-width”，高度留空不設(shè)置，初始縮放倍數(shù)絕對(duì)不能設(shè)置，最小縮放倍數(shù)設(shè)置為“0.1”，最大縮放倍數(shù)設(shè)置為10，允許用戶縮放留空不設(shè)置，ios部分可以不理默認(rèn)即可。另外需要 axure 8以上版本才能普遍適配手機(jī) 屏幕。

4a. 前端開(kāi)發(fā)人員全盤(pán)使用上面生成的html文件、資源文件、axure的js文件，在各個(gè)頁(yè)面上以前后端分離方式添加業(yè)務(wù)邏輯的實(shí)現(xiàn)（比如在html中加入jquery的ajax，和后端交互數(shù)據(jù)）。

4b. 后端開(kāi)發(fā)人員設(shè)計(jì)和實(shí)現(xiàn)業(yè)務(wù)邏輯和前后端接口（4b可以和3、4a步驟同步進(jìn)行），比如前后端使用restful的json封裝作為前后端接口的數(shù)據(jù)交互。

5. 單元測(cè)試、集成測(cè)試、灰度測(cè)試，bug修復(fù)，發(fā)布上線。

該模式問(wèn)題：一旦axure原型有修改，前端怎么能更快適配該修改（現(xiàn)在是文件比較方式，類(lèi)似git的merge）。

http://www.car-ocean.com/app-download/news.html

二、如何將web頁(yè)面改成響應(yīng)式

第一步：檢測(cè)網(wǎng)頁(yè)響應(yīng)式

瀏覽器打開(kāi)調(diào)試模式，打開(kāi)響應(yīng)式設(shè)計(jì)模式，在預(yù)覽區(qū)域拖動(dòng)大小范圍，如果頁(yè)面元素隨大小變化而自適應(yīng)，則頁(yè)面是響應(yīng)式頁(yè)面，反之，頁(yè)面是固定非響應(yīng)式頁(yè)面。如圖：

第二步：編輯網(wǎng)頁(yè)源文件

用Dreamweaver打開(kāi)頁(yè)面源文件，查看代碼樣式及文件結(jié)構(gòu)，（Web頁(yè)面的視覺(jué)效果由CSS樣式表文件控制）。如圖：

第三步：植入響應(yīng)式代碼

在CSS樣式表中插入以下代碼：

@media screen and (min-width:200px) and (max-device-width:640px){

/*這里寫(xiě)元素的樣式*/

}

代碼解釋?zhuān)哼@句代碼是指定了在200像素~640像素之間的終端，顯示的效果，在其他終端不顯示。

第四步：橫屏響應(yīng)式設(shè)計(jì)

在CSS中插入以下代碼

@media screen and (min-width:200px) and (max-device-width:640px){

.box{ width:100%;height:auto; margin:0 auto; background:#FFFFFF;}

}

控制元素在終端的橫向展示（全屏拉伸縮放無(wú)滾動(dòng)條），垂直方向用滾動(dòng)條展示。如圖：

第五步：豎屏響應(yīng)式設(shè)計(jì)

在CSS中插入以下代碼

@media screen and (min-width:200px) and (max-device-width:640px){

.box{ width:auto;height:100%; margin:0 auto; background:#FFFFFF;}

}

控制元素在終端的橫向展示（全屏拉伸縮放無(wú)滾動(dòng)條），垂直方向用滾動(dòng)條展示。如圖：

第六步：全屏響應(yīng)式設(shè)計(jì)

在CSS中插入以下代碼

@media screen and (min-width:200px) and (max-device-width:640px){

.box{ width:100%;height:100%; margin:0 auto; background:#FFFFFF;}

}

控制元素在終端的橫向展示（全屏拉伸縮放無(wú)滾動(dòng)條），垂直方向用滾動(dòng)條展示。如圖：

第七步：加工檢測(cè)

響應(yīng)式設(shè)計(jì)完成之后，用不同的終端全部檢測(cè)一遍，有不合格的地方繼續(xù)修改，這是程序員必須知道的也不能忽視的。

三、如何建設(shè)一個(gè)高質(zhì)量的H5響應(yīng)式網(wǎng)站

響應(yīng)式網(wǎng)站設(shè)計(jì)（Responsive Web design）的理念是：頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。無(wú)論用戶正在使用筆記本還是iPad，我們的頁(yè)面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備；換句話說(shuō)，頁(yè)面應(yīng)該有能力去自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這樣，我們就可以不必為不斷到來(lái)的新設(shè)備做專(zhuān)門(mén)的版本設(shè)計(jì)和開(kāi)發(fā)了。

四、響應(yīng)式網(wǎng)頁(yè)的設(shè)計(jì)策略有哪些?

移動(dòng)設(shè)備的設(shè)計(jì)首先要適應(yīng)大屏幕的視覺(jué)效果，其次要逐步提升移動(dòng)設(shè)備的視覺(jué)效果。移動(dòng)先行策略可以減少大量不必要的CSS代碼，有利于提高響應(yīng)式web的開(kāi)發(fā)效率，更好地滿足用戶的需求。

響應(yīng)式網(wǎng)頁(yè)的設(shè)計(jì)策略一般采用媒體查詢技術(shù)，設(shè)置了小屏幕、中屏幕和大屏幕三種布局方案。采用移動(dòng)優(yōu)先策略，先設(shè)計(jì)小屏幕布局。小屏幕顯示空間有限，在設(shè)計(jì)上要細(xì)化內(nèi)容，突出主要內(nèi)容，簡(jiǎn)化形式，折疊導(dǎo)航，減少橫幅廣告。在屏幕布局中，可以擴(kuò)展導(dǎo)航，適當(dāng)?shù)胤糯髾M幅，并在內(nèi)容區(qū)域中顯示四川字體和骨架布局。大屏幕的布局是基于中間屏幕的布局，因此側(cè)邊欄的內(nèi)容為“display: block”的顯示狀態(tài)。適當(dāng)增加網(wǎng)站的內(nèi)容，突出網(wǎng)站的特色，提高網(wǎng)站的性能效果，彌補(bǔ)小屏幕的視覺(jué)限制。為訪問(wèn)者提供新的視覺(jué)元素和豐富的頁(yè)面內(nèi)容。

可以看出,響應(yīng)頁(yè)面的設(shè)計(jì)策略可以提供各種各樣的布局,以便網(wǎng)頁(yè)能提供良好的用戶體驗(yàn)和視覺(jué)效果在不同的終端設(shè)備,廣泛的優(yōu)點(diǎn),充分發(fā)揮移動(dòng)互聯(lián)網(wǎng)渠道,高覆蓋率和容易使用。移動(dòng)優(yōu)先策略可以避免移動(dòng)端加載過(guò)多資源，不需要重新繪制PC風(fēng)格，也不影響PC端的性能效果。

響應(yīng)式設(shè)計(jì)為網(wǎng)站移動(dòng)性提供了一種新的響應(yīng)式網(wǎng)頁(yè)的設(shè)計(jì)策略和選擇。隨著響應(yīng)式設(shè)計(jì)技術(shù)的不斷發(fā)展和完善，它將得到越來(lái)越多的關(guān)注和應(yīng)用。想知道更多關(guān)于ui設(shè)計(jì)的設(shè)計(jì)素材與技巧，也可以點(diǎn)擊本站的其他文章進(jìn)行學(xué)習(xí)。

以上就是關(guān)于怎么寫(xiě)響應(yīng)式網(wǎng)頁(yè)相關(guān)問(wèn)題的回答。希望能幫到你，如有更多相關(guān)問(wèn)題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。