响应式开发-现状|学习笔记

简介: 快速学习 响应式开发-现状

开发者学堂课程【移动 Web 前端开发:响应式开发-现状】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/594/detail/8436


响应式开发-现状


内容介绍

第一、 适配

第二、 什么是响应式开发

第三、 为什么学习响应式开发

 

一、 适配

响应式开发做移动端适配,做 PC 端也适配,意思就是响应式开发可以适配于终端,也可以适配于 PC

 

二、 什么是响应式开发

1.在移动互联日益成熟的时候,我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。通常的做法是针对移动端单独做一套特定的版本,来达到移动端一个设备的需求。但是如果终端越来越多,需要开发的版本就会越来越多(大屏移动设备普及,例如5.1,5.7等等),一套页面放在移动端可能看着不错,但放在 PC 端就会显得不协调,这个时候响应式开发就能很好的解决这个问题。推特网,是一家美国社交网络及微博客户服务的网站,相当于中国的新浪微博。Ethan Marcatte 这个工程师在2010年5月份提出了一个概念,简而言之,就是一个网站能够兼容多个终端,也就是响应式开发。

2.响应式开发能适用于 PC 端,IPad,也适用于移动端等等

3.响应式就是一套页面能适配多个终端。

 

三、 为什么学习响应式开发

1. 目前移动设备的屏幕越来越大,种类越来越多,非常消耗开发资源。以京东为例:PC 端把静态页面变成动态页面,需要保存到数据库。M 端从后台渲染到前端,IPad 端也从后台渲染到前端,非常浪费时间周期,而且数据可能还是一样的。如果把 PC 端,M 端,IPad 端放在一起,统一交给后台进行一次数据处理,那就既节省时间,也不浪费开发资源,这就是响应式开发。它可以减少时间周期,从而提高开发效率,减少开发资源。

2.越来越多的设计师也采用了这种设计,因为大势所趋,设计师写 PSP(设计稿)也会采用响应式开发这种模式,减少 PSP,更简单明了,不会像京东这么复杂,更加适配移动端。为什么要用设计师,因为做响应式开发需要用到设计师的设计稿,得到设计稿就能做一套页面了。

3.新建的一些网站普遍采用的是响应式开发。例如京东、淘宝的移动端都是采用响应式开发。如果想做一个新建网站,那就要写一套 PC 端,M 端,IPad 端,然后在写其他,很麻烦。但如果使用响应式开发就只需把 PC 端、M 端和移动端放在一起写,节省开发时间,提高开发效率,这也就是为什么新建的一些网站普遍采用的是响应式开发,因为可以减少开发时间,提高开发效率。

相关文章
|
JSON 测试技术 数据处理
iOS-底层原理 35:组件化(一)方案
iOS-底层原理 35:组件化(一)方案
1526 0
iOS-底层原理 35:组件化(一)方案
|
JavaScript 数据处理
JS 取整,取余操作
JS 取整,取余操作
501 0
|
2月前
|
JavaScript 前端开发
uni-app中如何使用scss定义变量
使用SCSS在uni-app项目中定义和使用变量,不仅提高了样式代码的可维护性,还使得样式的修改和主题定制变得更加方便。只需更改变量值,就可以轻松改变整个应用的外观和风格。通过合理地组织和管理SCSS代码,可以大大提高开发效率和项目的可维护性。
229 9
|
8月前
|
存储 JavaScript 前端开发
|
4月前
|
SQL 前端开发 安全
前端参数校验与SQL注入防护:构建安全的应用防线
在Web开发中,前端参数校验不仅能提升用户体验,更是防御SQL注入等安全威胁的重要手段。本文分享前端校验的最佳实践,包括输入格式校验与参数类型转换,帮助开发者有效增强应用安全性。
259 0
|
人工智能 JSON 前端开发
copy和strong的区别及使用不当引起的crash
copy和strong的区别及使用不当引起的crash
303 0
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
1626 4
系统工程是一个跨学科的领域,它关注于如何设计、管理和优化复杂的系统。
系统工程是一个跨学科的领域,它关注于如何设计、管理和优化复杂的系统。
|
编解码 前端开发 开发者
掌握前端开发中的响应式设计技巧
掌握前端开发中的响应式设计技巧
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包(Closures)
深入理解JavaScript中的闭包(Closures)