做网站，先别想那些花哨的呢。第一件事，把手机端的体验搞定。现在大部分人用手机上网，你电脑上再好看，手机打开乱成一团，用户扭头就走。

怎么做？从最简单的开始。给页面加一行代码：``。这行代码告诉手机浏览器，别把页面缩成蚂蚁大小，按屏幕实际宽度来。不加这行，后面全白干。

接着，别用固定宽度。以前有人喜欢写`width: 960px`，觉得整齐。手机屏幕才375像素宽，你整960，结果就是横向滚动条，用户得左右划着看，烦不烦？把宽度改成百分比或者`max-width`，让它自己适应。

图片也是重灾区。一张大图直接塞进去，手机加载慢，流量哗哗跑。用`max-width: 100%`，让图片跟着容器缩放。再讲究点，用`srcset`给不同屏幕准备不同尺寸的图，手机加载小图，电脑加载大图，谁也不吃亏。

布局别用绝对定位。什么`position: absolute`加固定像素，屏幕一变就错位。老老实实用Flexbox或者Grid。Flexbox处理一维排列特别顺手，几个卡片横着排，屏幕窄了就自动换行。Grid适合做整体页面框架，写起来清楚。这两个东西学起来不难，用熟了效率翻倍。

字体大小用相对单位。`px`写死了，用户想在手机上放大点字都费劲。用`rem`，根元素定个基准，其他地方按比例来。用户浏览器调字号，你的页面跟着变，这才叫尊重人。

媒体查询是必须的。但别搞太多断点，两三个够用。比如手机一个、平板一个、桌面一个。写的时候从手机样式开始，慢慢往上加。这叫移动优先。反过来写也行，但容易漏掉手机端的小细节。

导航栏在手机上是个坑。横向菜单挤成一坨，点都点不准。老老实实做个汉堡按钮，点开是竖排菜单。别搞什么花哨的滑动效果，用户找不到菜单入口，你效果再炫也白搭。

触摸操作和鼠标不一样。按钮别做得太小，手指头粗，至少44像素见方。链接之间留点空隙，别挨得太近，不然用户点A跳到B，骂人的心都有。

还有，真机测试。浏览器开发者工具里的手机模拟器只是参考，真手机上跑一遍才知道行不行。借几台不同尺寸的手机试试，安卓苹果都看看。有问题早发现，别等上线了被用户截图吐槽。

响应式网站没那么玄乎。核心就一句话：别跟用户的屏幕较劲。屏幕大就多展示，屏幕小就收着点。顺着来，用户舒服，你也省心。