RWD设计对SEO有啥好处？看看搜索引擎为什么推荐它。

今天就来唠唠我搞那个叫RWD（响应式网页设计）的经历。

一开始接到个活儿，老板要求不高，就说网站要在电脑上看没问题，手机上、平板上也不能跑样，得让人用着舒服。我当时心想，这不就是让页面自己变大变小嘛能有多难？

上手开干

先是老老实实按着设计师给的大屏幕图，把电脑版的页面给搭了出来。布局、图片、文字，排得整整齐齐，看着还挺像那么回事儿。自己挺满意，觉得第一步挺顺利。

麻烦来了

接下来就是重头戏了，得让它在小屏幕上也能看。我打开浏览器那个开发者工具，试着把窗口往小了拖。好家伙！这一拖不要紧，页面整个乱套了。文字挤在一起，图片大的出奇直接把布局撑破了，导航栏更是没眼看，按钮都叠到一块儿去了。根本不是我想象的“等比例缩小”那么简单。

这才明白，不是简单缩放，是整个结构都要重新考虑。电脑上能并排显示三四块内容，手机屏幕就那么点儿大，肯定得让它们变成上下排列，不然字小得跟蚂蚁似的谁看得清。

开始折腾CSS

没办法，硬着头皮上。主要就是跟CSS死磕。用了很多那个叫“媒体查询”的东西， `@media` 什么的。意思就是告诉浏览器：“喂，如果屏幕宽度小于多少多少像素，你就给我换一套样式！”

设置断点

最头疼的是定“断点”，就是决定在哪个宽度下页面布局要发生变化。比如，宽度大于1200像素用电脑版布局，宽度在768到1200之间用平板的布局（可能改成两列），宽度小于768就用手机的单列布局。这个“断点”的数值，真是试了好久。拖动窗口边缘，反复看效果，调过来调过去。有时候平板看着行了，手机又出问题了。

• 导航栏改造： 电脑上那种横着一大条的导航，手机上肯定不行。改成了一个常见的“汉堡包”图标，点一下才弹出菜单。这个也费了点劲，要保证弹出和收起流畅。
• 图片处理： 图片也得跟着缩放，而且不能失真。还得考虑手机流量，不能让图片太大加载半天。搞了些CSS让图片宽度自适应，或者准备了几套不同尺寸的图，根据屏幕大小加载合适的。
• 字体大小： 电脑上看着合适的字号，手机上可能就太小或太大，每个断点都要去调整一下，保证阅读体验。



• 间距调整： 各种边距、内边距，在不同屏幕尺寸下也得跟着调整，不然元素要么挤死，要么空得难看。

反复测试

写一段代码，就在浏览器开发者工具里模拟各种手机、平板尺寸看效果。光模拟还不行，还得拿真实的手机、不同牌子的平板电脑来测试。因为有时候模拟器看着没问题，真机上就是另外一个样子。同事的手机、自己的备用机，都拿来一遍遍地刷。

最终效果

前前后后搞了好几天，总算是把这个响应式给弄得差不多了。不敢说在所有设备上都完美无缺，毕竟屏幕尺寸千奇百怪，但至少在主流的手机、平板和电脑上，网站都能正常浏览，内容清晰，操作也方便了。用户不管是躺着用手机看，还是坐着用电脑看，体验都还行。

为啥费这劲？

说到底，现在谁不是手机不离手？网站要是手机上打不开或者用着费劲，人家扭头就走了，生意还做不做了？而且听说，搜索引擎也喜欢这种能适应各种屏幕的网站，对排名有点好处。虽然过程挺折腾人的，但做完了看效果，觉得这功夫没白费，确实是现在做网站不能省的一步。