正文

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

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

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于簡(jiǎn)述響應(yīng)式開發(fā)流程的問(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、什么是響應(yīng)式是什么
2、如何用一簡(jiǎn)單的CSS制作響應(yīng)式HTML網(wǎng)頁(yè)
3、Adapt 響應(yīng)式課程開發(fā)框架(2)：內(nèi)容結(jié)構(gòu)
4、網(wǎng)站定制開發(fā)的流程是什么樣的？

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

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

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

優(yōu)點(diǎn)：

1、用戶體驗(yàn)友好

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

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

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

3、SEO友好

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

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

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

擴(kuò)展資料：

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

1、設(shè)計(jì)與風(fēng)格有局限性

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

2、對(duì)IE老板兼容性不友好

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

3、靈活性有所欠缺

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

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

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

建議展開閱讀

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

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

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

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

用戶可以通過(guò)平移和縮放來(lái)看網(wǎng)頁(yè)的不同部分。

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

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

比如CSS里面寫

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

這樣即可在html寫

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

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

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

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

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

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

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

詳細(xì)可以私信我

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

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

全文共1312字8圖 | 6分鐘

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

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

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

課程 (course)

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

頁(yè)面 (Page)

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

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

章節(jié) (Article)

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

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

組塊 (Block)

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

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

組件 (component)

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

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

二、常見問(wèn)題

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

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

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

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

Q. 這些json文件看上去好麻煩?。∮惺裁崔k法可以不用編輯這些json文件又能開發(fā)Adapt框架嗎？

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

三、總結(jié)

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

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

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

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

Adapt就是 A, B, C!

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

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

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

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

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

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

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

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

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

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

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

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

第六步、網(wǎng)站測(cè)試和內(nèi)容填充。程序開發(fā)出來(lái)后，交給測(cè)試人員測(cè)試，邊填充資料邊測(cè)試頁(yè)面效果，剛開發(fā)出來(lái)的網(wǎng)站都會(huì)存在一些問(wèn)題，因?yàn)槭羌兪止ぶ谱鞯捻?xiàng)目，靠鍵盤一個(gè)一個(gè)字母敲出來(lái)的代碼，有問(wèn)題實(shí)屬正?，F(xiàn)象，所以就需要進(jìn)行測(cè)試，還需要測(cè)試網(wǎng)站的兼容性問(wèn)題，測(cè)試出來(lái)的問(wèn)題點(diǎn)整理文檔形式交給程序員進(jìn)行修復(fù)。

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

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