前端如何做自适应

使用百分比宽度、媒体查询、rem单位、vw/vh单位。
这就是坑：依赖单一布局方案，忽略设备特性。
别信：纯CSS自适应。
别这么干：不进行设备测试。

去年夏天，我在一家小咖啡馆里，跟一个做前端的朋友聊起自适应布局的事。那时候，他正为一个新项目头疼，手机、平板、PC，各种设备屏幕尺寸不一，页面怎么都适配不了。我那时候刚从大学里那个“自适应布局课程”毕业，就随手拿出了我的笔记本，给他演示了一下。
我打开了一个简单的HTML和CSS页面，切换到手机模式，页面自动缩小了，文字和图片都还清晰可见。朋友眼睛一亮，问我：“这怎么做到的？”我告诉他：“其实，就是用百分比和媒体查询，还有flexbox布局，简单几行代码就搞定了。”
“，原来是这样。”他若有所思地说，“那我得赶紧去查查资料了。”
等等，我突然想到，那时候咖啡馆里还有个女孩，她用iPad刷着朋友圈，页面自动调整，看起来很舒服。我猜，她用的也是自适应布局吧。

前端自适应就是网页在不同设备上都能正常显示。就是让网页像变形金刚一样，能根据屏幕大小调整。常用方法：
1. 响应式布局：用百分比、媒体查询等，让网页元素能随屏幕大小变化。 2. 流式布局：用flexible box或grid布局，自动调整元素位置。 3. 响应式图片：使用标签的srcset属性，根据屏幕大小加载不同尺寸的图片。
上周刚处理一个项目，就是用响应式布局做的。简单说，就是用百分比代替固定像素，然后用CSS媒体查询来调整样式。你自己看，效果还不错。

响应式布局，CSS媒体查询，2020年某项目，100%适配。