正文

簡述響應(yīng)式開發(fā)流程（響應(yīng)式開發(fā)的原理）

發(fā)布時間：2023-04-26 23:53:56 稿源：創(chuàng)意嶺閱讀： 1057

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于簡述響應(yīng)式開發(fā)流程的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

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

本文目錄:

1、什么是響應(yīng)式是什么
2、如何用一簡單的CSS制作響應(yīng)式HTML網(wǎng)頁
3、Adapt 響應(yīng)式課程開發(fā)框架(2)：內(nèi)容結(jié)構(gòu)
4、網(wǎng)站定制開發(fā)的流程是什么樣的？

簡述響應(yīng)式開發(fā)流程（響應(yīng)式開發(fā)的原理）

一、什么是響應(yīng)式是什么

響應(yīng)式布局，是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。

優(yōu)點：

1、用戶體驗友好

響應(yīng)式網(wǎng)站可以根據(jù)不同終端、不同尺寸和不同應(yīng)用環(huán)境，自動調(diào)整界面布局、展示內(nèi)容、內(nèi)容大小，提供非常好視覺展示效果，一致性友好體驗。

2、節(jié)省設(shè)計與開發(fā)時間

響應(yīng)式網(wǎng)站界面只需要設(shè)計兩套設(shè)計效果圖，后期維護不需要分別維護pc界面、pad界面、移動界面，專心維護一個網(wǎng)站即可。

3、SEO友好

由于響應(yīng)網(wǎng)站在不同終端有友好的界面展示效果，用戶可以與網(wǎng)站一直保持聯(lián)系，比如URL不變積累分享。

4、可以適應(yīng)所有設(shè)備屏幕

擁有了響應(yīng)式的網(wǎng)站設(shè)計則不同，用戶可以一直和網(wǎng)站保持聯(lián)系，而且它對用戶非常用好。

擴展資料：

響應(yīng)式布局的缺點

1、設(shè)計與風格有局限性

自由度太低，局限性較大。

2、對IE老板兼容性不友好

對于老版本IE（IE6、IE7、IE8）支持不好。

3、靈活性有所欠缺

基于不同終端的設(shè)備屬性不同，對產(chǎn)品用戶體驗要求就會截然不同。內(nèi)容比較多帶有功能性的網(wǎng)站不適合做響應(yīng)式網(wǎng)站設(shè)計。

參考資料來源：百度百科—響應(yīng)式布局

二、如何用一簡單的CSS制作響應(yīng)式HTML網(wǎng)頁

建議展開閱讀

新人如果想快速開發(fā)出響應(yīng)式網(wǎng)站建議使用響應(yīng)式框架Bootstrap,Foundation等等......

三個部分[Viewport][網(wǎng)格視圖][媒體查詢]

1.先在head里面設(shè)置Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

用戶可以通過平移和縮放來看網(wǎng)頁的不同部分。

2.很多響應(yīng)式都基于網(wǎng)格視圖設(shè)計

響應(yīng)式網(wǎng)格視圖通常是 12 列，寬度為100%，在網(wǎng)頁自動伸縮

比如CSS里面寫

* {gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
    box-sizing: border-box;gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
}gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
[class*="col-"] {gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
    float: left;gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
    padding: 15px;gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
}gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
.col-1 {width: 8.33%;}gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
.col-2 {width: 16.66%;}gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
.col-3 {width: 25%;}gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
.col-4 {width: 33.33%;}gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
.col-5 {width: 41.66%;}gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
.col-6 {width: 50%;}gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
.col-7 {width: 58.33%;}gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
.col-8 {width: 66.66%;}gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
.col-9 {width: 75%;}gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
.col-10 {width: 83.33%;}gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
.col-11 {width: 91.66%;}gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
.col-12 {width: 100%;}

這樣即可在html寫

<div class="row">gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
<div class="col-3">gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
<ul>gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
<li>標題1</li>gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
<li>標題2</li>gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
<li>標題3</li>gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
<li>標題4</li>gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
</ul>gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
</div>gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
<div class="col-9">gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
<h1>2333333</h1>gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
<p>2333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</p>gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
<p>2333333333333333333333333333333333323333333333</p>gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
</div>

達到簡單的響應(yīng)式效果[拖拽瀏覽器大小查看]

圖片響應(yīng)式方法

div {gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
width: 100%;gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
height: 400px;gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
background-image: url('url');gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
background-repeat: no-repeat;gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
background-size: contain;gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
border: 1px solid red;gLL創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司
}

background-size 屬性設(shè)置為 "contain", 圖片比例會自動縮放。

3.媒體查詢主要用于針對不同的媒體類型定義不同的樣式

比如我在電腦顯示圖片1,但是在手機顯示的是圖片2

詳細可以私信我

三、Adapt 響應(yīng)式課程開發(fā)框架(2)：內(nèi)容結(jié)構(gòu)

導(dǎo)讀：使用許多傳統(tǒng)e-Learning課程開發(fā)軟件如Articulate storyline或Adobe captivate開發(fā)的課程是幻燈片式的，學(xué)習時用戶通過點擊鼠標來進行翻頁。而使用Adapt開發(fā)的課程是屬于單頁的網(wǎng)頁程序（single-page app)，用戶使用鼠標或手指滾動頁面來瀏覽學(xué)習。這種設(shè)計讓習慣了使用智能手機和平板電腦訪問互聯(lián)網(wǎng)的用戶覺得更自然，更符合時代的潮流。

全文共1312字8圖 | 6分鐘

一、內(nèi)容結(jié)構(gòu)層級

不同于傳統(tǒng)的幻燈片式編輯，使用Adapt開發(fā)響應(yīng)式網(wǎng)絡(luò)電子課程，你需要設(shè)置并編輯一系列課程json文件。這些文件集中存放在一個叫做Course的文件夾路徑下，包含以下幾個文件：

要掌握Adapt的內(nèi)容結(jié)構(gòu)，首先你要了解課程、頁面、章節(jié)、組塊與組件之間的層級關(guān)系，請看下圖：

課程 (course)

課程的添加是通過編輯修改course.json文件實現(xiàn)的，用戶為課程設(shè)定一個唯一id標識。

頁面 (Page)

同傳統(tǒng)網(wǎng)頁一樣，adapt課程設(shè)計師用一個或多個頁面來展示課程內(nèi)容。一般來說，一個頁面展示一個課程模塊或單元。根據(jù)這個課程模塊或單元的內(nèi)容，這個頁面可以包含一個或多個章節(jié)(Article)。

頁面的添加是通過編輯contentObjects.json實現(xiàn)的。用戶可以添加一個或多個頁面，每個頁面設(shè)置不同的id, 但每一個頁面的parentId(上級id)都必須設(shè)定為上級course.json中的課程id，因為課程id是唯一的。

章節(jié) (Article)

同頁面一樣，用戶可以在一個頁面內(nèi)設(shè)置一個或多個章節(jié)。章節(jié)的添加是通過編輯articles.json實現(xiàn)的。

在課程設(shè)計中，章節(jié)還起著一個非常重要的作用。設(shè)計師通過對不同的章節(jié)使用不同的設(shè)計，從而對頁面進行“分割”，使課程顯得更加豐富生動、層次分明。

組塊 (Block)

組塊有點像傳統(tǒng)elearning課程中的幻燈片。你可以在一個章節(jié)中添加一個或多個組塊，組塊的添加是通過編輯blocks.json實現(xiàn)的。

不同于頁面和章節(jié)，在一個組塊中你只可以添加一個全寬(full-width)或兩個半寬(half-width)的組件。如果你在一個組塊中添加了過多的組件，通常情況下這些組件都會顯示在頁面上，但會顯得雜亂無章。

組件 (component)

在課程開發(fā)中，組件是整個開發(fā)框架中最有趣的部分，用戶開發(fā)的課程內(nèi)容都是通過各種各樣不同的組件實現(xiàn)的。

組件根據(jù)功能可分為：展示組件和問題組件。展示組件包括如：文字組件、圖片組件、視頻組件、手風琴式折疊組件、熱點圖片組件等。問題組件包括如：多項選擇題、下拉式選擇題、圖片選擇題、填空題、滑塊問題等。Adapt開發(fā)框架目前包含十幾種組件，用戶還可以在網(wǎng)絡(luò)社區(qū)中找到更多社區(qū)開發(fā)的組件。組件可以根據(jù)內(nèi)容設(shè)置為占據(jù)頁面的全部寬度(full-width)或一半寬度(half-width)。一般情況下，一個組塊(block)可以放置1個全寬或2個半寬的組件，當然你也可以選擇在一個組塊中放置一個半寬的組件。

二、常見問題

Q. 我可以設(shè)置一個組件（component）的parentld為course的id嗎？

A: 不可以。使用adapt開發(fā)課程，你必須嚴格遵循course-page-article-block-component的層級結(jié)構(gòu)。

Q. 我在一個組塊中（block）添加了兩個組件，并且都設(shè)置為full-width全寬顯示，會出現(xiàn)什么情況？

A: 兩個組件應(yīng)該都會顯示，但顯示樣式會錯亂。Don’t do that!

Q. 這些json文件看上去好麻煩??！有什么辦法可以不用編輯這些json文件又能開發(fā)Adapt框架嗎？

A: 你可以選擇使用Adapt Authoring Tool來開發(fā)課程。Adapt Authoring Tool (也稱作Adapt Builder)是一個基于Adapt開發(fā)框架開發(fā)的課程制作平臺，有點類似于CMS內(nèi)容編輯系統(tǒng)。用戶無需手動編輯*.json文件就可制作adapt課程。Adapt Authoring Tool的安裝需要一些技術(shù)儲備，我們會在接下來的adapt系列文章中介紹它的安裝方法。

三、總結(jié)

頁面(Page) 包含1個或多個章節(jié)(Article)。

文章(Article) 包含1個或多個組塊(block)。

組塊(Block) 包含1個全寬(full-width)組件或2個半寬(half-width)組件(Component)。

組件(Component) 是用來模塊化創(chuàng)建課程內(nèi)容的。

Adapt就是 A, B, C!

微信搜索 “即刻學(xué)堂” 關(guān)注公眾號，為企業(yè)提供移動學(xué)習解決方案～

四、網(wǎng)站定制開發(fā)的流程是什么樣的？

定制網(wǎng)站是針對企業(yè)、行業(yè)進行策劃、設(shè)計、制作、功能開發(fā)的網(wǎng)站，是為企業(yè)量身打造的網(wǎng)站。接下來，就跟大家分享定制網(wǎng)站制作的流程。

第一步、明確網(wǎng)站的定位。

我們要明確自己網(wǎng)站的定位，清楚公司的產(chǎn)品優(yōu)勢以及訪問的目標群體。這是我們首先要做分析的，只有根據(jù)自己公司的實際情況，來制作網(wǎng)站的風格定位。眾所周知，網(wǎng)站風格分營銷型網(wǎng)站、品牌型網(wǎng)站、電商網(wǎng)站、平臺網(wǎng)站等，關(guān)于我們的類型我下次可以給大家具體講解。檔你明確了自己網(wǎng)站的定位后，開始收集相關(guān)的網(wǎng)站案例，作為下一步工作的參考。

第二步、制作網(wǎng)頁原型圖。

這是一個細致的活，需要做好溝通，以便出來的頁面效果是企業(yè)想要的。目前設(shè)計流行的元素是采用圖標配文字，界面扁平化，尺寸做成寬屏風格。在制作原型圖的過程中，我們需要看很多的網(wǎng)站風格，如果你是要做外貿(mào)網(wǎng)站，那么你需要尋找很多國外大牌的網(wǎng)站，看一下他們的網(wǎng)站風格，才能很好的找到那種思維感覺。國內(nèi)的網(wǎng)站相對來說還是比較保守一些，盡管也是扁平化設(shè)計，但是從布局上大多數(shù)網(wǎng)站是異曲同工。

第三步、上色/UI界面設(shè)計。

當原型圖做好以后，可以開始交給設(shè)計師做UI設(shè)計，設(shè)計師會根據(jù)原型圖的布局進行上色設(shè)計，但是不局限于原型圖，優(yōu)秀的設(shè)計師不會按部就班執(zhí)行，會根據(jù)自己的經(jīng)驗適度做一些細節(jié)布局上的更改，此舉的目的是為了提高界面美觀和用戶體驗度。

第四步、DIV+CSS切圖/排版。

當設(shè)計工作完成后，要開始做切圖，如果網(wǎng)站只是PC站，切圖只要做一套樣式，如果是響應(yīng)式網(wǎng)站開發(fā)，切圖就需要做三套樣式，分別為PC端、平板、手機端。響應(yīng)式網(wǎng)站會根據(jù)不同分辨率和屏幕大小自動適應(yīng)，以達到最好的體驗效果，但是在這里我需要補充一句，不是所有的網(wǎng)站都適合做成響應(yīng)式，因站而異。

第五步、程序開發(fā)。切圖完成后，就進入程序開發(fā)階段，程序開發(fā)就是做后臺管理，讓網(wǎng)站后期能有一個管理后臺來更新前端的資料內(nèi)容，目前開發(fā)網(wǎng)站的開發(fā)語言比較流行的有兩種：一是PHP語言，二是java語言。

第六步、網(wǎng)站測試和內(nèi)容填充。程序開發(fā)出來后，交給測試人員測試，邊填充資料邊測試頁面效果，剛開發(fā)出來的網(wǎng)站都會存在一些問題，因為是純手工制作的項目，靠鍵盤一個一個字母敲出來的代碼，有問題實屬正?，F(xiàn)象，所以就需要進行測試，還需要測試網(wǎng)站的兼容性問題，測試出來的問題點整理文檔形式交給程序員進行修復(fù)。

以上就是定制網(wǎng)站制作的流程。網(wǎng)站做好后，在上線之前，建議讓更多的人員看看，以便更好的看網(wǎng)站的兼容效果以及細節(jié)效果，做好進一步的完善。

以上就是關(guān)于簡述響應(yīng)式開發(fā)流程相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。