本文作者:李洋博客

响应式布局与自适应式布局有什么不同

李洋博客 2个月前 ( 08-12 ) 984 6条评论
响应式布局与自适应式布局有什么不同摘要: 很多人会对响应式布局和自适应式布局产生混淆,这两者到底有着什么样的区别呢?因为不同于移动站,就事一个独立的站点,每个模块都有独立接口,但是Google一直以来就是推荐响应式设计的,...

很多人会对响应式布局和自适应式布局产生混淆,这两者到底有着什么样的区别呢?因为不同于移动站,就事一个独立的站点,每个模块都有独立接口,但是Google一直以来就是推荐响应式设计的,至于为什么你可以参考此篇文章:移动端网站怎样做SEO优化?我们今天就来了解下二者之间是责骂定义的。

响应式布局:

响应式布局,称为Responsive Web Design。它是将已有的开发技巧(弹性网格布局、弹性图片、媒体和媒体查询)整合起来,针对任意设备对网页内容进行“完美”布局的一种显示机制。简言之,是一个网站能够兼容多个终端(手机、Pad、电脑)的布局方法,而不需要为每个终端书写一套特定版本的代码。

自适应布局:

移动端的发展带来了自适应布局。通过JS及CSS的控制,借助rem、百分比等相对度量单位,让代码在多种分辨率的移动端正常呈现。自适应布局,是当前移动端实现网页布局的最常用的布局方法,需要综合使用多种知识。

响应式布局与自适应式布局有什么不同.jpg

响应式与自适应的区别

1.自适应布局通过检测视口分辨率,来判断当前访问的设备是:pc端、平板、手机,从而请求服务层,返回不同的页面;响应式布局通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容。

2.自适应布局需要开发多套界面,而响应式布局只需要开发一套界面就可以了。

3.自适应对页面做的屏幕适配是在一定范围:比如pc端一般要大于1024像素,手机端要小于768像素。而响应式布局是一套页面全部适应。

4.自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念,它可以自动识别屏幕宽度并做出相应调整的网页设计。

总之,响应式布局还是要比自适应布局要好一点,但是自适应布局更加贴切实际,因为你只需要考虑几种状态就可以了而不是像响应式布局需要考虑非常多状态。所以的说无论哪种设计都有它们各自的特点,我们要根据项目的需求来选择适合的布局方式。

文章版权及转载声明:

作者:李洋博客本文地址:https://www.talklee.com/blog/426.html发布于 2个月前 ( 08-12 )
文章转载或复制请以超链接形式并注明出处李洋个人博客

分享到:
赞(6

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

发表评论

快捷回复:

评论列表 (有 6 条评论,984人围观)参与讨论
网友昵称:hamer
hamer 铁粉2019-09-17板凳 回复 Google Chrome 63.0.3239.132 Windows 10 x64
介绍的很全面,谢谢
网友昵称:李洋博客
李洋博客 博主2019-09-17 回复 Sogou Explorer Windows 10 x64
@hamer 不客气,能帮到您就好!
网友昵称:永恒情书微博
永恒情书微博 游客2019-08-14椅子 回复 Google Chrome 67.0.3396.99 Windows 7 x64
文章不错,写的很好!
网友昵称:李洋博客
李洋博客 博主2019-08-14 回复 Sogou Explorer Windows 10 x64
@永恒情书微博 谢谢支持!
网友昵称:好看的小说
好看的小说 游客2019-08-13沙发 回复 UC Browser 6.2.4098.3 Windows 10 x64
虽然看不懂,但是感觉还不错。
网友昵称:李洋博客
李洋博客 博主2019-08-14 回复 Sogou Explorer Windows 10 x64
@好看的小说 就是记住响应式的布局很好就行了,比如我的主题都是响应式主题。