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

2644 篇文章 26 订阅
2396 篇文章 14 订阅

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

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

什么是响应式设计?

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

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

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

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

什么是自适应设计?

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

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

最后: 下方这份完整的软件测试视频学习教程已经整理上传完成,朋友们如果需要可以自行免费领取【保证100%免费】

这些资料,对于【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴上万个测试工程师们走过最艰难的路程,希望也能帮助到你!

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值