这事儿我得说道说道。 哎呀，亲爱的小伙伴们，你们知道吗这个？现在做个网站，不能只考虑电脑了哦，手机、平板电脑、手表，各种各样的设备都要能看！这就需要我们学习一下响应式网站设计啦！今天我就来跟你们说说怎么用这些小技巧，让我们的网站变成超级英雄，适配各种终端！

响应式与自适应：两种网站， 两种风格

不是我唱反调... 哦哦，有些小伙伴可能分不清响应式和自适应，别急别急，我来解释解释。响应式就像一个人， 可以根据环境改变自己的形态；自适应就像一个智能机器人，它知道该什么时候变身，变成什么形态。简单响应式是根据屏幕大小自动调整，自适应是检测设备类型来调整。

协作是关键：设计师和开发者要好朋友

设计一个网站， 可不是设计师一个人就能搞定的，得设计师和开发者一起合作。设计师画个漂亮的图，开发者用代码把它变成现实。所以他们要经常沟通，沟通，再沟通！这样才能让我们的网站既漂亮又好用。

图片素材要早准备：PNG、 JPG、SVG，随便你选

图片是网站的灵魂，没有了图片，网站就像没了眼睛。但是图片格式太多了PNG、JPG、SVG，怎么选呢？其实没有固定的答案，只要大家达成共识，用一样的格式就好了。对了还得注意图片大小，别太大，太大下载慢，用户体验就不好了，境界没到。。

模块化设计：从基础元素开始

设计网站就像盖房子，得从基础开始。模块化设计就是先设计一些小的、 可复用的元素，比如按钮、图片、表格，然后把这些元素组合起来就变成了一个完整的网站。这样不仅设计方便，还方便开发者开发。

CSS Grid 与 Flexbox：强大的布局工具

CSS Grid 和 Flexbox 是两种超级强大的布局工具， 可以让我们的网站布局更灵活， 礼貌吗？ 更适应各种屏幕大小。用它们，我们可以轻松做出复杂的布局，让网站看起来更美观。

响应式网站不仅仅是静态的，还可以根据用户的行为。比如用户把手机横过来网站就自动切换到横屏模式。 摸鱼。 这样的设计，用户体验更棒！

打造适配多终端的网站：流体网格、 弹性图片、媒体查询

要打造一个真正适配多终端的网站，我们需要用到流体网格、弹性图片、媒体查询这些技术。流体网格可以让网站布局更灵活， 弹性图片可以让图片在各种设备上都能显示得很好，媒体查询可以让我们根据不同的屏幕大小调整网站样式，那必须的！。

好了今天我就跟大家分享到这里。学会了这些响应式网站设计技巧， 相信你们都能轻松打造出一个适配多终端的网站， 人间清醒。 让更多的用户喜欢我们的网站！加油哦！