在当今数字化的世界中，网页设计面临着各种各样的挑战，为了在不同的设备和屏幕尺寸上提供最佳的用户体验，响应式设计和自适应设计应运而生。
不过，好多刚接触网页设计的朋友，都不知道该选响应式设计还是自适应设计。
先说说响应式设计，他会适应不同屏幕尺寸，响应式设计的核心是使界面能够根据不同设备的屏幕尺寸和分辨率进行自适应调整。比如视频中的Behance网站。
浏览器会根据浏览器窗口的尺寸更改页面的显示方式，内容就像水一样，并根据浏览器的屏幕大小完美地塑造形状。
通俗来讲，就是它是一种能根据设备和屏幕大小，自己调整布局和内容的设计方法。不管你是用电脑、平板还是手机看网页，都能有不错的体验，整个网站的风格啥的也都一样。
响应式设计优点：
1.发时间短，成本低
2.只需维护一套页面
3.跨设备展示一致性强
4.无缝衔接，体验丝渭
5.SEO(搜索引擎优化)友好
响应式设计缺点：
1.网页过于复杂时易出错
2.加载时间更长
3.难以跨设备整合广告
4.无法为不同设备定制体验
自适应设计就是根据不同的设备和屏幕尺寸，提供特定的设计版本。设计交付的内容在不同的设备上是不同的，有多套模板。
自适应设计并不是动态的，并不是说根据你的窗口大小，他的布局就跟着动态的变大变小。而是有几个特定的断点值，到了这个值，才会改变大小布局。
你可以把断点想象成一个”分界线“，界面的大小布局都可以根据这个“分界线”来调整。
当屏幕大小变了，到了这个断点值的时候，就像跨过了这条线一样，网页就会“变个样子”，这个断点值就是用来告诉网页：“嘿，该换个样子啦！”它可以帮助网页在不同的设备上自动调整。
自适应设计的优点：
1.设计师对体验的控制权更大
2.可基于用户量身定制广告
3.处理复杂交互内容能力强
4.加载速度更快
5.现有网站无需重复开发
自适应设计的缺点：
1.开发多套页面，成本高
2.维护多组页面，难以维护
3.调整窗口大小布局跳跃
4.网页变小时可能遮挡内容
5.中间尺寸设备可能被忽略
如何应用响应式：
响应式的原理乃是借助定位的手段进行响应式的各类开发，需在页面里起码标出如下十个要点：中心点、上下左右点、上左上右点以及下左下右点，这几个点实则象征着进行响应式操作与布局相关的位置。
如此或许大家不易弄懂，实则结合 figma 来看，这些点所对应的便是（如下图所示），即 figma 中的布局点。设计师通过调控图形的布局点，能够达成在页面拉伸时，令想要变动的元素随之变化，而不想动的元素保持静止，这便是响应式的原理。
换而言之，我们实施响应式布局的原理也就是通过 figma 或者 sketch 中的布局约束这一功能来实现的。
優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實的服務(wù)了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用（手機站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號：
專屬顧問
