做网站先想清楚一件事：用户拿什么看你的页面呗。手机、平板、笔记本，屏幕大小差好几倍。以前只做电脑版，手机上字小得看不清，按钮点不中，人直接走了。响应式就是让一套代码适应所有屏幕。

别急着写样式。先加一行meta标签：

html

没这行，手机浏览器会把页面缩成电脑版的样子，后面全白搭。

布局别写死宽度。`width: 1200px`这种写法在手机上必然溢出。改用百分比或`fr`单位。最省事的是Flexbox和Grid。一行三列，用Grid两行代码：

css
display: grid;


grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

屏幕宽就三列，窄了自动变两列、一列。不用写一堆媒体查询。

图片也得管。大图在手机上加载慢，还费流量。给图片加`max-width: 100%`，高度自动。想更讲究，用``标签按屏幕给不同尺寸的图。手机给小的，电脑给大的。

字体别用固定像素。`font-size: 16px`在手机上还行，用`32px`就太大了。用`rem`，根字号随屏幕调。或者用`clamp()`：

css
font-size: clamp(1.2rem, 4vw, 2rem);

意思是字号最小1.2rem，最大2rem，中间跟着屏幕宽度走。一行搞定。

媒体查询还是要用，但别滥用。断点按定，别照搬别人的768px、1024px。把浏览器窗口慢慢拉窄，哪里挤了、字换行难看了，那里就是断点。常见的两三个就够。

导航栏是重灾区。电脑上横排一排链接，手机上塞不下。简单做法：小屏幕下把链接竖着堆，或者加个汉堡按钮展开收起。用CSS就能做，不用JS。`checkbox`加`label`的经典套路，稳当。

触摸操作要想到。按钮和链接别太小，手指点不准。最小点击区域44像素见方。链接之间留点空隙，别挨着。

测试别只信浏览器开发者工具。真机上看一遍。安卓和苹果的浏览器渲染有差别，尤其是默认样式。花十分钟在真手机上点点，能省后面一堆麻烦。

响应式不是加个媒体查询就完事。从布局、图片、字体到交互，每一层都得松绑。写的时候心里装着“这行代码在手机上什么样”，比事后补丁强得多。