什么是自适应网站，什么是响应式网站？

2022-06-02 09:01:00

阅读 8775次标签：开发作者： yipinweike01

　　经常会有人问什么是自适应网站，什么是响应式网站?自适应网站与响应式网站的区别在哪?两者之间有什么区别吗?

　　对于自适应网站与响应式网站的区别，其实大部分客户是不知道它们的关系和区别的，甚至很多设计师和开发也解释不清楚。

　　想要了解两者的区别，在此之前，先了解以下网站布局的五种方式：静态布局(static layout);流式布局(Liquid Layout);自适应布局(Adaptive Layout);响应式布局(Responsive Layout);弹性布局(rem/em布局)。

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

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

　　如果pc，移动要兼容，而且要求较高那么自适应布局或响应式布局是很好的选择。

　　1、两者的概念

　　响应式网页设计(Responsive Web design)：指一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本的设计方式及技术。

　　自适应网页设计(Adaptive Web Design)：自适应设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。

　　2、两者的区别

　　响应式设计目的是为不同类别的物理设备建立相同的网页(pc、平板、手机、手表等)，检测到设备分辨率大小后调用相应的网页。

　　自适应设计目的是为同类别的物理设备建立三种不同的网页(PC)，检测到设备分辨率大小后调用相应的网页。(可以只适应pc不同分辨率，比如设置四档位宽度1180、1440、1680、1920)。

　　3、响应式设计优缺点

　　优点：面对不同分辨率设备灵活性强-能够快捷解决多设备显示适应问题

　　缺点：仅适用布局、功能、框架不复杂的网站-需要兼容各种设备，工作量大，代码需要隐藏无用的元素，导致加载时间加长。

　　4、自适应设计优缺点

　　优点：对网站的复杂程度兼容性更大-实施起来代价更低-代码更高效。缺点：自适应网站的手机站有时无法做到与PC站内容完全一致，且工作量大，自适应手机站往往使用不同的子域名或目录跳转，对于优化来讲权重分散，访客浏览体验仍有缺陷。

　　对于布局、功能、框架不复杂的网站，使用响应式网页设计方式是当下主流且相对较优的选择，同时更利于网站SEO检索。目前新网所推出的模板建站和定制建站产品均采用响应式设计，支持PC、手机、平板、TV种设备访问场景，同时还包含seo优化、万能表单、会员管理、公众号托管、小程序一键生成等多项辅助功能，助力客户打造品牌数字化形象。