响应式自适应式

Posted 2022-05-11 dengguangxue

一点点补充

 

响应式布局与自适应布局的区别：

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

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

 

1、灵活性不同：

静态布局：毫无灵活性可言，目前已逐渐被淘汰。

自适应布局：静态布局的升级版，因其强大的灵活性，已逐渐成为高端网页的代名词。

流式布局：灵活性更高，可适用于其他三种网站布局。

响应式布局：自适应布局的升级版，响应式网站要普遍适应市面上各类屏幕，开发难度和工作量都是非常大的，开发价格自然比普通网站高。

2、设计方法不同：

静态布局：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分。

自适应布局：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。

流式布局：使用百分比定义宽度，高度大都是用px来固定，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。

响应式布局：媒体查询+流式布局。使用@media媒体查询和网格系统配合相对布局单位进行布局，就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

 

静态、自适应、流式、响应式四种网页布局的特点概括

1、静态布局：即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。

2、流式布局：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

3、自适应布局：分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。

4、响应式布局：分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。

-------------------------------------

https://www.douban.com/note/709353445/

 

响应式缺点：

1、对于一些逻辑业务不同终端不同处理方式，不是很友好

例如：响应式设计并不利于百度的关键词优化和排名。因为用户在不同终端的搜索习惯不同，所以百度对移动网站和电脑网站的关键词处理策略也不相同。

2、响应式网站无法区分移动端，浪费带宽，加载耗时长。

响应式（自适应）设计的实现方式，往往是缩小或者隐藏电脑版网站的内容，使之适应移动端的窄屏。但隐藏的内容依然会加载，低分辨率设备会加载高质量的图片或者视频，不分屏幕尺寸都提供相同大小的网页。

这样的话，响应式网站加载的内容相比非响应式网站会增加20-50%。加载内容多，速度慢，浪费流量。响应式网站相对非响应式网站的加载耗时，一般都会延长1-2秒，在2G、3G网络情况下更严重。所以有的时侯，用户体验不是很好。

 （引：https://blog.csdn.net/daimomo000/article/details/79378190    可以参考、有点以偏概全的一篇文章）

 

共同学习，共同进步，若有补充，欢迎指出，谢谢！