【响应式和自定义区别】

简介: 【响应式和自定义区别】

  1. 响应式设计(Responsive Design):响应式设计是指通过使用 CSS3 媒体查询、弹性网格布局、图片缩放等技术,让网站能够根据浏览器窗口大小和屏幕分辨率的变化,自动调整页面布局和内容显示方式,从而达到在各种终端设备上呈现最佳视觉效果的目标。
  2. 自适应设计(Adaptive Design):自适应设计是指通过识别并适应特定设备或屏幕大小,针对特定的设备或分辨率提供单独的设计方案。这意味着设计人员需要为不同的设备或分辨率创建不同的布局和设计方案。

1.响应式的概念覆盖了自适应,但响应式包含的东西更多,响应式的布局可以根据屏幕的大小自动调整页面的展示方式

2.自适应有一个致命缺点:如果屏幕尺寸太小,即使网页能够根据屏幕大小进行适配,也会感觉在小屏幕上查看,内容过于拥挤

3.响应式解决了自适应布局的问题,响应式能自动识别屏幕宽度,并做出响应调整,布局和展示的内容可能会有所变动

自适应:

1.定义:又称为宽度百分比或者流式布局

2.优点:能在不同的设备上呈现相同的页面

3.缺点:在不同的设备上呈现相同的页面,对页面进行压缩

响应式:

1.定义:根据不同的设备显示出不同的页面

2.优点:不同分辨率下设备灵活性好,它比自适应好,自适应的话只是宽度自适应;多终端视觉和用户操作体验好;响应式web设计中的大部分技术都可以用在webapp开发中,可以用在移动端设备,也可以用在pc端

3.缺点:兼容各种设备工作量大,效率低下,代码累赘,会出现隐藏无用的元素,加载时间加长



相关文章
|
1月前
|
JavaScript 数据管理 虚拟化
ArkTS List组件基础:掌握列表渲染与动态数据管理
在HarmonyOS应用开发中,ArkTS的List组件是构建动态列表视图的核心。本文深入探讨了List组件的基础,包括数据展示、性能优化和用户交互,以及如何在实际开发中应用这些知识,提升开发效率和应用性能。通过定义数据源、渲染列表项和动态数据管理,结合虚拟化列表和条件渲染等技术,帮助开发者构建高效、响应式的用户界面。
196 2
|
1月前
|
开发者 UED
ArkTS响应式刷新问题高级用法
本文详细介绍了ArkTS中响应式刷新的高级用法,涵盖Refresh组件的使用、状态管理、条件渲染及精准控制组件刷新。通过实例讲解了Refresh组件的触发条件、事件处理、常用属性,以及如何利用@State、@Link和@Watch装饰器优化状态管理和组件刷新,帮助开发者构建高效、可维护的HarmonyOS应用。
166 0
|
3月前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
52 0
前端基础(十)_Dom自定义属性(带案例)
|
2月前
|
前端开发 JavaScript API
React将组件作为属性传递的最佳实践
本文探讨了在React中将组件作为属性传递的三种常见方式:作为元素传递、作为组件传递、作为函数传递。通过构建带图标的按钮组件,对比分析了每种方式的优缺点,最终推荐将组件作为函数传递,因为它提供了更好的可控性、灵活性和可扩展性。
47 0
|
4月前
|
前端开发 API
|
6月前
|
JavaScript
Vue模板语法、属性绑定、条件渲染的学习
Vue模板语法强调插值表达式需返回结果以显示。避免问题的方法是将逻辑处理放在JS中,不在模板内实现。Vue属性绑定使用`v-bind`(可简写为:)动态绑定类或ID,当值为null或undefined时自动移除。支持布尔类型和动态绑定多值。条件渲染包括`v-if`、`v-else`、`v-else-if`和`v-show`,其中`v-if`用于真值时渲染,`v-show`按条件显示,两者的区别在于频繁切换场景和渲染方式。
|
缓存 JavaScript 前端开发
Vue2.0新手入门-模板语法-计算属性与监听属性的介绍和差异
Vue2.0新手入门-模板语法-计算属性与监听属性的介绍和差异
Vue2.0新手入门-模板语法-计算属性与监听属性的介绍和差异
|
7月前
|
JavaScript
除了对象字面量形式和Vue.createApp方法,还有哪些方式可以注册组件?
除了对象字面量形式和Vue.createApp方法,还有哪些方式可以注册组件?
31 0
|
7月前
|
存储 JavaScript 前端开发
详细介绍Vue3中的监听属性的概念、使用方式以及一些常见的应用场景
详细介绍Vue3中的监听属性的概念、使用方式以及一些常见的应用场景
339 0
|
7月前
|
前端开发
Vue3中样式绑定的使用方法、相关指令和一些实际应用场景
Vue3中样式绑定的使用方法、相关指令和一些实际应用场景
312 0