网站得在手机上看，也得在电脑上看，这已经是常识。但很多人做完电脑版，才发现手机上一团糟。返工很烦人。不如一开始就按响应式来做。

响应式说白了就是一页html，靠css自动调整布局。屏幕大就横着排，屏幕小就竖着叠。不用做两个网站，不用跳转到m.xxx.com。维护省事，对搜索引擎也友好。

第一步，别急着写样式。先把viewport标签加上。这行代码放进head里，手机才不会把你的页面缩小成一团。少这一句，后面全白搭。

第二步，用流式布局。别写死像素宽度。容器用百分比或者max-width，图片设max-width:100%，让它们自己缩放。图片撑破容器是最常见的问题，加上这一条立刻解决。

第三步，媒体查询。这是响应式的核心。先在电脑上把布局写好，然后开浏览器开发者工具，切到手机尺寸看。哪里挤了、哪里溢出了、哪里字太小了，就在那个断点写媒体查询。常用断点大概在768px和480px附近，但别照抄，按你的来。需要换行的时候就是断点，不是某个固定数字。

第四步，考虑触屏。按钮要够大，至少44像素见方。手指点不准小小的链接。导航在小屏幕上收进汉堡菜单，别让用户横向滚动。横向滚动条在手机上异常烦人。

第五步，字体别太小。手机上正文至少16px。行高给够，1.5到1.7之间。别用太细的字重，小屏幕上看不清。

第六步，测试。真机测试比模拟器靠谱。借几台不同尺寸的手机看看。安卓和苹果都试试。旋转屏幕试试横屏。别只看最新款，老手机也要照顾。

几个坑提醒你。别用固定高度，一多就溢出。别用px写死字体大小，用户改了系统字号就乱。视频也要设max-width:100%。表格在手机上很难搞，能改成卡片布局就改。

工具方面，浏览器开发者工具够用了。写的时候从手机开始设计也行，叫移动优先，逼你先想清楚什么最重要。两种思路都行，关键是别只盯着电脑屏幕。

响应式不是什么高深技术。核心就三件事：灵活的布局、图片自适应、媒体查询调断点。把这三样做扎实，网站基本就能到处跑了。剩下的是细节打磨，慢慢来。