​响应式设计 vs自适应式设计

简介: ​响应式设计 vs自适应式设计

大家好,我是阿萨。平时我们使用的应用程序,大部分有2种设计方法。 今天就分别介绍下这2种设计方法。


有两种方法可以确保网站针对移动、平板电脑、笔记本电脑和PC屏幕进行优化:响应式设计和自适应设计。虽然两者都是为了解决同样的问题,但它们使用了不同的策略。


什么是响应式设计?


使用响应式设计创建的网站为每个设备提供相同的站点,但该站点是流动的,并将根据设备的大小和方向改变其布局和外观。


开发人员使用CSS来确保网站的每个页面都可以根据用户视口的大小重新格式化,并且只需要为网站创建一个代码库。他们使用一种叫做断点的东西来告诉网站什么时候调整以适应不同的屏幕尺寸。


现在大多数新网站都使用响应式,这对于经验不足的设计师和开发人员来说更加容易,这要归功于通过CMS系统(如WordPress、Joomla和Drupal)访问主题的可用性。


响应式设计不提供像自适应那样多的控制,但在构建和维护方面需要的工作要少得多。响应式布局也是流动的,虽然自适应可以在缩放时使用百分比来提供更流畅的感觉,但当窗口调整大小时,这些可能再次导致跳跃。


什么是自适应设计?


在自适应设计中,为每个设备的屏幕创建不同的网站布局。当它加载时,网站识别屏幕的大小,并提供为该视口所做的布局。事实上,你可以为从非常小到非常大的六种常见屏幕尺寸创建不同的用户体验:320px, 480px, 760px, 960px, 1200px和1600px。


自适应对于改造现有网站以使其更适合移动电话非常有用。这让你可以控制特定的多个视图的设计和web开发。您选择设计的视图的数量完全取决于您、您的公司和您的总体预算。然而,它确实为您提供了一定程度的控制(例如对内容和布局),这是使用响应式设计所不需要的。


相关文章
|
3月前
移动端的布局如何使用媒体查询
移动端的布局如何使用媒体查询
47 2
|
2月前
|
编解码 前端开发 搜索推荐
什么是响应式设计?响应式设计的基本原理是什么?如何实现?
什么是响应式设计?响应式设计的基本原理是什么?如何实现?
125 0
|
3月前
|
移动开发 前端开发 iOS开发
H5页面布局之图片液态化(自适应)处理简述
H5页面布局之图片液态化(自适应)处理简述
20 0
H5页面布局之图片液态化(自适应)处理简述
|
8月前
|
编解码
什么是响应式设计?响应式设计的基本原理是什么?如何做?
什么是响应式设计?响应式设计的基本原理是什么?如何做?
|
8月前
|
编解码
【响应式和自适应的区别】
【响应式和自适应的区别】
|
4月前
|
前端开发 JavaScript UED
响应式设计与自适应设计有何不同
响应式设计与自适应设计有何不同
47 0
|
10月前
|
编解码 前端开发 UED
构建自适应的用户界面:响应式设计与布局
在当今多设备和多屏幕的世界中,为用户提供一致的体验变得至关重要。响应式设计与布局是一种解决方案,它允许我们构建自适应的用户界面,以适应各种屏幕尺寸和设备类型。本文将介绍响应式设计的基本原理和最佳实践,帮助开发人员在构建用户界面时实现良好的响应性和灵活性。
142 0
|
Web App开发
移动端适配——视口概念
事实上这种方式是不利于我们进行移动的开发的,我们希望的是设置100px,那么显示的就是100px;
117 0
移动端适配——视口概念
|
前端开发
前端知识案例学习9-可调整尺寸得UI
前端知识案例学习9-可调整尺寸得UI
113 0
前端知识案例学习9-可调整尺寸得UI
|
编解码 前端开发 JavaScript
移动端页面开发适配 rem布局原理
移动端页面开发适配 rem布局原理