做网站，先别想着酷炫罢了。打开电脑看看，再掏出手机看看。同一个页面，两边都能看，字不挤，按钮点得着，这才算及格。这就是响应式网站，说白了，让网页自己适应屏幕。

以前的做法是给手机单独做个站，麻烦。现在一套代码搞定。关键是别跟屏幕较劲，让它自己变。

第一步，加个meta标签。这行代码告诉手机浏览器，别自作主张放大缩小，按实际宽度来：

html

第二步，别写死宽度。以前动不动就`width: 960px`，手机屏幕才375，直接溢出。改成百分比或者`max-width`。图片也一样，给它`max-width: 100%`，别撑破容器。

第三步，用媒体查询。屏幕窄了，布局得变。比如侧边栏，电脑上放右边，手机上挪到下面：

css
@media (max-width: 768px) {


.sidebar { float: none; width: 100%; }


.main { width: 100%; }


}

断点别设太多，两三个够用。手机、平板、桌面，三档就行。设多了自己都记不住。

第四步，字体和间距。手机上字太小，手指点不准。正文至少16px，按钮高度别低于44px。行间距也别抠，挤成一团谁看得下去。

第五步，导航栏要变。电脑上是横排菜单，手机上塞不下。要么折叠成汉堡按钮，要么堆叠成竖排。汉堡按钮不是必须的，两三个链接直接竖着排更省事。

第六步，别用固定定位搞悬浮广告。手机屏幕本来就小，糊一层上去，全挡了。真要用，给个关闭按钮，别耍流氓。

测试的时候，别光在电脑上拖窗口。拿真手机看，安卓苹果都试试。电脑模拟器和真机有差别，尤其是触摸和滚动。

最后一点说个实在的：响应式不是加几行代码就完事。得从画图开始就想，哪些先显示，哪些可以藏。手机上别想着把所有东西都塞进去，该砍就砍。

做完了，电脑上看一眼，手机上看一眼。顺眼，能点，就成了。