-
让品牌有温度、有情感
专注品牌策划15年
简述响应式开发流程（响应式开发的原理）
发布时间：2023-04-26 23:53:56
稿源：
创意岭 阅读：
1057
大家好！今天让创意岭的小编来大家介绍下关于简述响应式开发流程的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
创意岭作为行业内优秀企业，服务客户遍布全国，相关业务请拨打175-8598-2043，或微信：1454722008
本文目录:
一、什么是响应式是什么
响应式布局，是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
优点：
1、用户体验友好
响应式网站可以根据不同终端、不同尺寸和不同应用环境，自动调整界面布局、展示内容、内容大小，提供非常好视觉展示效果，一致性友好体验。
2、节省设计与开发时间
响应式网站界面只需要设计两套设计效果图，后期维护不需要分别维护pc界面、pad界面、移动界面，专心维护一个网站即可。
3、SEO友好
由于响应网站在不同终端有友好的界面展示效果，用户可以与网站一直保持联系，比如URL不变积累分享。
4、可以适应所有设备屏幕
拥有了响应式的网站设计则不同，用户可以一直和网站保持联系，而且它对用户非常用好。
扩展资料：
响应式布局的缺点
1、设计与风格有局限性
自由度太低，局限性较大。
2、对IE老板兼容性不友好
对于老版本IE（IE6、IE7、IE8）支持不好。
3、灵活性有所欠缺
基于不同终端的设备属性不同，对产品用户体验要求就会截然不同。内容比较多带有功能性的网站不适合做响应式网站设计。
参考资料来源：百度百科—响应式布局
二、如何用一简单的CSS制作响应式HTML网页
建议展开阅读
新人如果想快速开发出响应式网站建议使用响应式框架Bootstrap,Foundation等等......
三个部分[Viewport][网格视图][媒体查询]
1.先在head里面设置Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
用户可以通过平移和缩放来看网页的不同部分。
2.很多响应式都基于网格视图设计
响应式网格视图通常是 12 列，宽度为100%，在网页自动伸缩
比如CSS里面写
* { box-sizing: border-box;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
这样即可在html写
<div class="row"><div class="col-3">
<ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
</div>
<div class="col-9">
<h1>2333333</h1>
<p>2333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</p>
<p>2333333333333333333333333333333333323333333333</p>
</div>
达到简单的响应式效果[拖拽浏览器大小查看]
图片响应式方法
div {width: 100%;
height: 400px;
background-image: url('url');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
background-size 属性设置为 "contain", 图片比例会自动缩放。
3.媒体查询主要用于针对不同的媒体类型定义不同的样式
比如我在电脑显示图片1,但是在手机显示的是图片2
详细可以私信我
三、Adapt 响应式课程开发框架(2)：内容结构
导读： 使用许多传统e-Learning课程开发软件如Articulate storyline或Adobe captivate开发的课程是幻灯片式的，学习时用户通过点击鼠标来进行翻页。而使用Adapt开发的课程是属于单页的网页程序（single-page app)，用户使用鼠标或手指滚动页面来浏览学习。这种设计让习惯了使用智能手机和平板电脑访问互联网的用户觉得更自然，更符合时代的潮流。
全文共1312字8图 | 6分钟
一、内容结构层级
不同于传统的幻灯片式编辑，使用Adapt开发响应式网络电子课程，你需要设置并编辑一系列课程json文件。这些文件集中存放在一个叫做Course的文件夹路径下，包含以下几个文件：
要掌握Adapt的内容结构，首先你要了解课程、页面、章节、组块与组件之间的层级关系，请看下图：
课程 (course)
课程的添加是通过编辑修改course.json文件实现的，用户为课程设定一个唯一id标识。
页面 (Page)
同传统网页一样，adapt课程设计师用一个或多个页面来展示课程内容。一般来说，一个页面展示一个课程模块或单元。根据这个课程模块或单元的内容，这个页面可以包含一个或多个章节(Article)。
页面的添加是通过编辑contentObjects.json实现的。用户可以添加一个或多个页面，每个页面设置不同的id, 但每一个页面的parentId(上级id)都必须设定为上级course.json中的课程id，因为课程id是唯一的。
章节 (Article)
同页面一样，用户可以在一个页面内设置一个或多个章节。章节的添加是通过编辑articles.json实现的。
在课程设计中，章节还起着一个非常重要的作用。设计师通过对不同的章节使用不同的设计，从而对页面进行“分割”，使课程显得更加丰富生动、层次分明。
组块 (Block)
组块有点像传统elearning课程中的幻灯片。你可以在一个章节中添加一个或多个组块，组块的添加是通过编辑blocks.json实现的。
不同于页面和章节，在一个组块中你只可以添加一个全宽(full-width)或两个半宽(half-width)的组件。如果你在一个组块中添加了过多的组件，通常情况下这些组件都会显示在页面上，但会显得杂乱无章。
组件 (component)
在课程开发中，组件是整个开发框架中最有趣的部分，用户开发的课程内容都是通过各种各样不同的组件实现的。
组件根据功能可分为：展示组件和问题组件。展示组件包括如：文字组件、图片组件、视频组件、手风琴式折叠组件、热点图片组件等。问题组件包括如：多项选择题、下拉式选择题、图片选择题、填空题、滑块问题等。Adapt开发框架目前包含十几种组件，用户还可以在网络社区中找到更多社区开发的组件。 组件可以根据内容设置为占据页面的全部宽度(full-width)或一半宽度(half-width)。一般情况下，一个组块(block)可以放置1个全宽或2个半宽的组件，当然你也可以选择在一个组块中放置一个半宽的组件。
二、常见问题
Q. 我可以设置一个组件（component）的parentld为course的id吗？
A: 不可以。 使用adapt开发课程，你必须严格遵循course-page-article-block-component的层级结构。
Q. 我在一个组块中（block）添加了两个组件，并且都设置为full-width全宽显示，会出现什么情况？
A: 两个组件应该都会显示，但显示样式会错乱。Don’t do that!
Q. 这些json文件看上去好麻烦啊！有什么办法可以不用编辑这些json文件又能开发Adapt框架吗？
A: 你可以选择使用Adapt Authoring Tool来开发课程。Adapt Authoring Tool (也称作Adapt Builder)是一个基于Adapt开发框架开发的课程制作平台，有点类似于CMS内容编辑系统。用户无需手动编辑*.json文件就可制作adapt课程。Adapt Authoring Tool的安装需要一些技术储备，我们会在接下来的adapt系列文章中介绍它的安装方法。
三、总结
页面(Page) 包含1个或多个章节(Article)。
文章(Article) 包含1个或多个组块(block)。
组块(Block) 包含1个全宽(full-width)组件或2个半宽(half-width)组件(Component)。
组件(Component) 是用来模块化创建课程内容的。
Adapt就是 A, B, C!
微信搜索 “即刻学堂” 关注 公众号 ，为企业提供移动学习解决方案～
四、网站定制开发的流程是什么样的？
定制网站是针对企业、行业进行策划、设计、制作、功能开发的网站，是为企业量身打造的网站。接下来，就跟大家分享定制网站制作的流程。
第一步、明确网站的定位。
我们要明确自己网站的定位，清楚公司的产品优势以及访问的目标群体。这是我们首先要做分析的，只有根据自己公司的实际情况，来制作网站的风格定位。众所周知，网站风格分营销型网站、品牌型网站、电商网站、平台网站等，关于我们的类型我下次可以给大家具体讲解。档你明确了自己网站的定位后，开始收集相关的网站案例，作为下一步工作的参考。
第二步、制作网页原型图。
这是一个细致的活，需要做好沟通，以便出来的页面效果是企业想要的。目前设计流行的元素是采用图标配文字，界面扁平化，尺寸做成宽屏风格。在制作原型图的过程中，我们需要看很多的网站风格，如果你是要做外贸网站，那么你需要寻找很多国外大牌的网站，看一下他们的网站风格，才能很好的找到那种思维感觉。国内的网站相对来说还是比较保守一些，尽管也是扁平化设计，但是从布局上大多数网站是异曲同工。
第三步、上色/UI界面设计。
当原型图做好以后，可以开始交给设计师做UI设计，设计师会根据原型图的布局进行上色设计，但是不局限于原型图，优秀的设计师不会按部就班执行，会根据自己的经验适度做一些细节布局上的更改，此举的目的是为了提高界面美观和用户体验度。
第四步、DIV+CSS切图/排版。
当设计工作完成后，要开始做切图，如果网站只是PC站，切图只要做一套样式，如果是响应式网站开发，切图就需要做三套样式，分别为PC端、平板、手机端。响应式网站会根据不同分辨率和屏幕大小自动适应，以达到最好的体验效果，但是在这里我需要补充一句，不是所有的网站都适合做成响应式，因站而异。
第五步、程序开发。切图完成后，就进入程序开发阶段，程序开发就是做后台管理，让网站后期能有一个管理后台来更新前端的资料内容，目前开发网站的开发语言比较流行的有两种：一是PHP语言，二是java语言。
第六步、网站测试和内容填充。程序开发出来后，交给测试人员测试，边填充资料边测试页面效果，刚开发出来的网站都会存在一些问题，因为是纯手工制作的项目，靠键盘一个一个字母敲出来的代码，有问题实属正常现象，所以就需要进行测试，还需要测试网站的兼容性问题，测试出来的问题点整理文档形式交给程序员进行修复。
以上就是定制网站制作的流程。网站做好后，在上线之前，建议让更多的人员看看，以便更好的看网站的兼容效果以及细节效果，做好进一步的完善。
以上就是关于简述响应式开发流程相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。
推荐阅读：
赣公网安备 50019002502384号
