前端怎么做适配

用媒体查询，针对不同屏幕尺寸设置样式。
例如：@media (max-width: 768px) { ... }
2018年，某网站因未适配移动端，访客流失20%。
别只适应大屏，忽视小屏。

嘿，记得那会儿我在深圳给一家互联网公司做前端开发，有个项目得适配好几个设备，真是个头疼的事。那时候，我试了试用百分比布局，结果发现手机端显示效果太差了。后来改用Flexbox，嘿，效果那是杠杠的。记得那次调试，我坐在工位上，从下午一点忙到晚上九点，眼睛都花了。适配这件事，说难不难，说简单也不简单，关键是要找到那个平衡点。嗯，还有个事，我突然想到，如果当时用了一些自动化的工具，比如Lighthouse，可能能省不少事呢。

适配这事儿，说起来都是泪啊。记得我第一次接触前端适配还是2012年，那时候我刚入行，那时候的网页设计那叫一个简单，就那几个分辨率，现在想想真是好怀念啊。
那时候，我负责的是一个电商网站的前端，那时候的分辨率还比较统一，主要就是1080p和1366x768这两种。当时我用的方法就是写CSS媒体查询，根据不同的屏幕尺寸来调整布局。那时候，要是遇到一个分辨率超出了正常范围的，我就得手动去调整CSS，那叫一个费劲。
后来啊，随着手机、平板的普及，分辨率越来越多，适配就变成了一个头疼的问题。我记得有一次，我负责的项目要适配30多种不同的设备，那简直是噩梦。那时候，我学会了使用Bootstrap这样的框架，它有响应式布局，可以自动适配不同的屏幕尺寸，那真是救了我一命。
再后来，随着移动端设备的普及，我还在项目中尝试过使用rem和em单位来代替像素，这样可以在一定程度上减少适配的麻烦。不过，这也不是万能的，有些复杂的布局还是得手动调整。
说起来，还有一次，我接了一个项目，要适配的数量特别多，大概有50多种不同的设备。那时候，我就把所有设备的分辨率都列出来，然后一个一个地做适配。那段时间，我几乎每天都要加班到深夜，就为了确保每个设备上的页面都能正常显示。
现在回想起来，那几年真是苦不堪言，但也是在这过程中，我学到了很多。现在，前端适配的手段越来越多，像React、Vue这样的框架都有内置的响应式设计，做适配也变得简单多了。
总之呢，前端适配这个事儿，就是一个不断学习和适应的过程。我自己的经验就是，多研究一下不同的设备和分辨率，掌握一些适配的技巧，比如媒体查询、rem和em单位，还有各种响应式框架，这样就能轻松应对各种适配问题了。当然，这块我没碰过、我不敢乱讲，不过根据我自己的经验，这些都是挺有用的。