自适应和响应式的区别有哪些你知道吗?

      很多人对于响应式网站的定义是:能够适应不同屏幕大小终端设备的网站称之为响应式网站。所以很多人都会把自适应网站当做响应式网站,但是其实响应式网站和自适应网站是有区别的,它们两者从形式上看,都是可以实现自动适应不同屏幕大小的终端设备,但是这两者是有根本的区别的。

       很多人对响应式网站和自适应网站都存在误解,会以为这两者都是同一类型的网站,只是叫法不一样。但是如果通过实际的浏览体验,就能分辨出它们的区别。可以说自适应只是响应式当中的一个子集,也就是说响应式的开始形态是自适应。要完全区别于它们两者,首先你要了解,什么是响应式布局?什么是自适应布局?

什么是响应式布局?

响应式网页布局设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比div吧,而角落里的某个地方就好比父元素,由于父元素空间的改变,我们不得不调整div,让它能够依然放在角落里。在项目中你会遇到不同的终端,由于终端分辨率不同,所以你要想让用户体验更好,就必要让你的页面能够兼容多个终端。

什么是自适应布局?

      自适应网页布局设计指网页能够在不同大小的终端设备上自行适应显示。简单来说:就是让一个网站在不同大小的设备上呈现显示同一样的页面,让同一个页面适应不同大小屏幕,根据屏幕的大小,自动缩放。

      总的来说响应式与自适应的原理是相似的,都是检测设备,根据不同的设备采用不同的css,而且css都是采用的百分比的,而不是固定的宽度,不同点是响应式网站在不同的设备上看上去是不一样的,会随着设备的改变而改变模板样式、模块排版、展示样式。

        而自适应不会,所有的设备看起来都是一样的网站,不过是长度或者图片变小了,不会根据设备采用不同的展示样式。

       可能说的那么多,大家会觉得响应式网站做起来肯定很难,但是其实不然,不管懂不懂技术,懂不懂代码都可以利用建站宝盒响应式建站系统来建设响应式网站。响应式网站不单止变得易于优化,更多的是提高了用户的一个浏览体验度。


结论:

       所以说看一个网站是不是响应式网站,不能单单看它能不能自动适应不同大小设备,还要看适应以后的展现样式,更为重要的是你自己要多了解,不然就很容易混淆。希望本文能帮到你分清响应式网站和自适应网站的不同之处。

最后还分享下网页布局的几种类型→

网站布局的五种方式

静态布局(static layout)

流式布局(Liquid Layout)

自适应布局(Adaptive Layout)

响应式布局(Responsive Layout)

弹性布局(rem/em布局)

稍微总结下

1.如果只做pc端,那么静态布局(定宽度)是最好的选择;

2.如果做移动端,且设计对高度和元素间距要求不高,那么弹性布局(rem+js)是最好的选择,一份css+一份js调节font-size搞定;

3.如果pc,移动要兼容,而且要求很高那么响应式布局还是最好的选择,前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 十章 吕可乐有很多想不明白的事。当刘威找人收拾飞鱼的时候。她心里除了一丝的担忧外。别无其他的,那时。她觉得自己是个...
    uiu阅读 458评论 0 1
  • 烟台恒美广告有限公司 和利喷画 简约装饰工程有限公司 简•美画框工作室 一站式广告服务集商 比学习,今天看天道,了...
    0222e7fbf980阅读 77评论 0 0
  • 小时候经常会听到奶奶说唱一些顺口溜,感觉超有趣。记忆最深刻的是,«十八个大姐织手巾»,还有«拐棍花»。我听不懂什么...
    沐子青少年心智培优教练阅读 1,455评论 0 0
  • “我想看上去得体一点”阿欢说,“比方说你要带女朋友回家,一定希望她看上去比较清纯可爱。”Peter知道阿欢要开始滔...
    南门瑛阅读 386评论 0 0
  • 感赏儿子昨晚睡觉主动关灯关空调。我六点钟起来到客厅,客厅里静悄悄,灯未开,空调未开。听听儿子的房间,悄无声息。感赏...
    张敬叶阅读 216评论 0 7

友情链接更多精彩内容