选择分类
  • 云瑞原创
  • Mockups
  • Ui Kits
  • 背景纹理
  • 图标
  • 平面图形
  • 探索
  • 笔刷
  • 图层样式
  • PPT模版
  • 影视素材
  • 教程
  • C4D资源
  • PS动作
  • 常用3D资源
  • 字体
  • 网站模板
  • LR预设
  • 设计学院

网页设计:响应式VS.自适应,哪种设计更好呢?

blog-rwd-v-awd-1

移动设备的发展让我们不能再忽略它们,人民用它们访问网站,而不是台式电脑。如果你的网站还不能再移动端浏览,那么你的商机将大大减少,并且访问量也不会增加。

有什么不一样呢?

响应式是流布局,它会自动适应屏幕大小,不管是什么设备。响应式使用CSS完成设备判断。这种基于网格的流布局会自动调整网页的高度和宽度来使用不同尺寸的屏幕,并让其现实正确。

r_vs_a-1

 

自适应则采取多个不同的布局设计,多个屏幕的尺寸,使用哪个布局取决于屏幕类型。自适应作品用屏幕尺寸来决定用哪套布局。

vs_banner

如何比较响应式和自适应?
responsive-or-adaptive

响应式网页会是一个更难的选择,因为它需要用CSS和结构来确保网页能再任何大小上现实,让一套布局能在任何屏幕上使用是一件令人生畏的事情。

自适应的设计不太灵活,它只能在其预先设计好的屏幕上正常显示,如果市面上出现了一个新的尺寸,你可能就要修改你的设计了,活着干脆重设计一个,响应式网站在这方面更灵活些,自适应的网站会经常需要一些例行公事的维护。

r_vs_a-2

 

我们的设计到底是使用响应式还是自适应呢?

在大多数情况下,响应式网站是个安全的选择。无论屏幕大小,它都能有很好的现实性能,而且早起设计的时候也会解约很多时间。

但是,最终还是要看内容,如果内容太多,页面信息复杂,建议使用自适应的模式,因为这样设计移动端要考虑的会简单一些,而且更容易做适配。如果内容少,当然首选响应式。市面上也有一些典型的例子,比如“淘宝”,因为首页内容太多,所以只能选择自适应的模式,PC端和移动端的内容差别很大。再如“36kr”他们就是典型的响应式,因为信息架构简单。

云瑞设计小程序
云瑞设计小程序

微信扫一扫
手机使用更方便!

云瑞设计订阅号
云瑞设计订阅号

关注我们的微信订阅号,不错过任何福利。