先定三个断点：手机（小于768px）、平板（768到1024px）、电脑（大于1024px）。断点别贪多，三四个够用。

HTML里加一行viewport标签：``。不加这行，手机上页面会缩成一小块。

布局用Flexbox或Grid，别用float。Flexbox适合一行排几个卡片的场景，Grid适合整页分区。比如三栏布局，电脑上并排，手机上自动竖着堆：

css
.container { display: flex; flex-wrap: wrap; }


.card { flex: 1 1 300px; }

图片别写死宽度。设`max-width: 100%; height: auto;`，图片就跟着容器缩放，不会撑破屏幕。

字体用相对单位。`rem`或`vw`都行。正文16px起步，手机上别小于14px。

导航栏是最容易翻车的地方。电脑上横排，手机上得收起来。做个汉堡按钮，点一下展开菜单。别用hover，手机没鼠标。

媒体查询写在CSS末尾，从大往小写或者从小往大写都行，但一个项目里统一。手机优先写`min-width`，电脑优先写`max-width`。

用Chrome开发者工具的设备模拟器调试。切到iPhone、iPad几个尺寸，看哪里溢出、哪里点不着。真机测试不能省，模拟器跟真实设备有差别。

隐藏要小心。`display: none`在手机上藏掉的东西，搜索引擎也看不见。重要别藏。

表格在手机上容易溢出。外面包个`overflow-x: auto`的div，让它能横向滑动。

触控目标至少44x44像素。手指比鼠标指针粗得多，小按钮点不准。

最后，别用固定像素宽度写死任何东西。百分比、flex、grid、max-width轮着用。写完在电脑上缩窗口，一直缩到300px宽，页面不炸就算过关。