响应式和自适应如何区分?

简介: 响应式和自适应总是让人分不清,主要原因是,它们在概念上并不是并列关系,而是从属关系。如果一定要从概念上进行区分:自适应这个概念范围更广一些,包含:响应式和代码适配。一个网站采用响应式或者代码适配,都叫做自适应。

响应式和自适应总是让人分不清,主要原因是,它们在概念上并不是并列关系,而是从属关系。

如果一定要从概念上进行区分:

自适应这个概念范围更广一些,包含:响应式和代码适配。

一个网站采用响应式或者代码适配,都叫做自适应。

响应式的网站,一定是自适应的;

自适应的网站,可能是响应式的,也可能是代码适配的。

那么如何定义自适应呢?

自适应,指的是不管用户采用什么客户端访问网站,网站的URL地址保持不变。

即:同一个URL地址的内容,可自动适应不同的客户端设备,包含PC、手机、平板等。

要实现这样“自适应”的目标,可以采用的方法共有两种:

1、响应式,即只用一套模板,可同时适配不同的客户端设备包含PC、手机、平板等,模板代码不变。

2、代码适配,即采用两套或多套模板,服务器对用户的浏览器(ua)进行分析,根据不同客户端设备类型,返回不同的模板(html)。

以上两种方法,网站的URL地址都没发现变化。

不同方法,返回给用户的模板不同。

案例:

富贵论坛www.fgba.net采用的是代码适配的方法,PC一套模板,手机一套模板,但URL保持不变。

很多个人博客和企业站往往是响应式的。

目录
相关文章
|
7月前
自适应日落动态卡通动画404页面模板
自适应日落动态卡通动画404页面模板
33 4
自适应日落动态卡通动画404页面模板
|
7月前
|
编解码 前端开发 开发者
构建响应式网页布局的策略与技术
【2月更文挑战第20天】在移动设备日益普及的今天,构建能够适应不同屏幕尺寸和分辨率的响应式网页已成为前端开发的重要组成部分。本文将深入探讨实现响应式网页布局的关键策略和技术,包括灵活的网格系统、媒体查询、流式布局以及现代CSS框架的应用。通过实例分析和最佳实践的分享,读者将获得创建高效、可维护响应式网站所需的知识。
89 1
|
编解码
【响应式和自适应的区别】
【响应式和自适应的区别】
|
7月前
|
编解码 JavaScript UED
Vue中如何实现动态改变字体大小
Vue中如何实现动态改变字体大小
|
7月前
|
前端开发 开发者 UED
构建响应式网页布局的现代方法
【2月更文挑战第13天】随着移动互联网的兴起,为不同设备设计适配的网页变得至关重要。本文深入探讨了使用Flexbox和Grid两种CSS布局技术构建响应式网页的方法,分析了它们的优劣,并通过实例展示了如何有效地运用这些技术以提升页面的响应性和用户体验。
|
7月前
|
编解码 前端开发 开发工具
构建高效响应式网页布局的策略
【2月更文挑战第14天】在多设备浏览时代,响应式网页设计已成为前端开发的核心要素。本文将探讨实现高效响应式布局的关键策略,包括流式布局、弹性图片以及媒体查询的合理运用。通过这些方法,开发者能够确保用户在不同尺寸的设备上都能获得优质的浏览体验,同时保持代码的简洁性和可维护性。
ECharts分段型视觉映射组件的属性修改
ECharts分段型视觉映射组件的属性修改
62 0
|
编解码 前端开发 JavaScript
响应式图像优化:如何根据用户设备和网络条件优化网页中的图像,以提高用户体验和加载速度。
响应式图像优化:如何根据用户设备和网络条件优化网页中的图像,以提高用户体验和加载速度。
|
前端开发 JavaScript
渐进增强和优雅降级之间的区别?css3动画格式?== 和 === 的区别?
渐进增强:** 一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
|
数据可视化 vr&ar 计算机视觉
使用标记增强技术将虚拟内容呈现到现实场景中
使用基于标记的增强现实将虚拟内容呈现到场景中。
173 0