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

talklee

温馨提示:这篇文章已超过1680天没有更新,请注意相关的内容是否还可用!

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

响应式布局:

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

自适应布局:

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

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

响应式与自适应的区别

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

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

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

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

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

文章版权声明:除非注明,否则均为李洋个人博客原创文章,转载或复制请以超链接形式并注明出处。

发表评论

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

目录[+]