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

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

开发者学堂课程【移动 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 端和移动端放在一起写,节省开发时间,提高开发效率,这也就是为什么新建的一些网站普遍采用的是响应式开发,因为可以减少开发时间,提高开发效率。

相关文章
|
编解码 监控 前端开发
响应式框架:塑造多平台体验的未来
在今天的多设备和多屏幕时代,响应式框架已经成为前端开发的不可或缺的工具。它们允许开发人员创建一次,适应多个设备和屏幕尺寸的网站和应用程序。本博客将深入探讨响应式框架的核心概念、流行的框架以及为什么它们对于塑造多平台体验如此重要。
96 0
|
2天前
|
机器学习/深度学习 前端开发 搜索推荐
前端框架的数据驱动方式未来的发展趋势是什么?
总之,前端框架的数据驱动方式未来将不断创新和发展,以适应不断变化的技术环境和用户需求。这些趋势将共同推动前端开发向更加智能、高效、个性化和安全的方向发展,为用户带来更好的体验和价值。
|
1月前
|
移动开发 前端开发 JavaScript
前端开发:从零到一构建响应式网页
【10月更文挑战第1天】前端开发:从零到一构建响应式网页
43 2
|
3月前
|
Java UED Maven
紧跟技术潮流:手把手教你构建响应式Vaadin应用,让用户体验无缝接轨!
【8月更文挑战第31天】本文从零开始,详细介绍如何使用强大的Java框架Vaadin构建流畅且响应式的Web应用程序。首先,确保安装JDK 1.8+、Maven 3.3.9+及IDE。接着,创建Maven项目并添加Vaadin依赖。然后,通过继承`UI`类创建主界面,并定义自定义主题与样式。利用Vaadin的响应式布局组件,如`HorizontalLayout`和`VerticalLayout`,实现多设备兼容性。
57 0
|
3月前
|
存储 JavaScript
Vuex 最佳实践:借势技术热点,打造 Vue 应用的可维护与可扩展之梦,你还在等什么?
【8月更文挑战第27天】Vuex是Vue.js的状态管理工具,适用于复杂应用的状态集中管理,使状态变更更为清晰、可预测及易维护。其核心特点包括:利用单一状态树来集中存放应用所有状态,便于追踪变化并简化管理;通过模块划分对大型应用进行拆分,以增强代码可维护性并明确各模块职责;借助命名空间防止模块间命名冲突;启用严格模式确保状态变更只能通过mutations进行,提升代码质量。示例代码展示了商品和购物车模块的定义与使用,说明如何在Vue组件中调用Vuex的状态和操作。
38 0
|
6月前
|
编解码 前端开发 搜索推荐
构建响应式网页设计的最佳实践
【5月更文挑战第17天】构建响应式网页设计的关键在于提供跨设备的优质体验。本文总结了8大最佳实践:1) 移动优先设计,2) 流式布局,3) 灵活处理图片和媒体,4) 使用CSS媒体查询,5) 简化导航和布局,6) 优化字体大小和行高,7) 考虑触摸和手势支持,以及8) 不断测试与调试。通过这些方法,开发者能创建适应各种屏幕尺寸且用户体验优良的网站。
|
5月前
|
机器学习/深度学习 人工智能 前端开发
现代化软件开发中的前端技术趋势鹅
随着互联网和移动应用的迅猛发展,现代化软件开发中的前端技术也在不断演进。本文将探讨当前前端技术的最新趋势,包括WebAssembly的兴起、跨平台开发工具的应用以及人工智能与前端技术的结合等方面。通过这些内容,读者将能够更好地了解前端技术领域的最新发展动向。
|
6月前
|
缓存 前端开发 JavaScript
探索现代化前端开发趋势
本文将深入探讨当下前端开发领域的最新趋势和技术,包括前端框架、CSS预处理器、性能优化等方面。通过了解这些趋势,开发者可以更好地适应行业变化,提升自己的技术水平。
|
6月前
|
Rust 前端开发 开发者
云谦:谈谈前端框架的趋势与实践
云谦:谈谈前端框架的趋势与实践
|
前端开发 UED
响应式Web设计的原理与实践
响应式Web设计的原理与实践
109 0