先写手机版，再管电脑哟。顺序反了，你会改到崩溃。

第一步，加一行代码。在里放这个：。没它，手机浏览器会把页面缩成蚂蚁字。

第二步，用百分比，别用固定像素。宽度写100%，高度让自己撑。图片加max-width:100%，高度设auto。这样图不会撑破屏幕。

第三步，媒体查询。简单说就是“屏幕窄了换套写法”。比如：@media (max-width: 768px) { ... }。里面把三栏改一栏，字号调小。断点别设太多，手机和电脑两个就够，平板靠自适应。

第四步，导航栏改造。电脑上横排，手机上藏起来。放个汉堡按钮，用一点JS切换显示。别搞花哨动画，点开能看就行。

第五步，字体大小用rem。根字号设16px，写1.5rem。手机上看不清？媒体查询里把根字号调到18px，全站跟着变。

第六步，测试。电脑上把浏览器窗口拖窄，看布局啥时候乱。再拿真手机打开，别只信模拟器。手指点按钮，够不够大？至少44像素见方。

常见坑：表格在手机上溢出。给它套个div，加overflow-x:auto。视频用iframe的话，外面包一层，设padding-bottom撑比例。

末了说，flexbox比float省心。容器写display:flex，子元素写flex:1，自动分宽度。换行加flex-wrap:wrap。老浏览器？不管了，现在都支持。

记住一条：优先。小屏幕上，用户最想看的放最前面。别为了“响应式”三个字，把有用的东西藏起来。

动手改你现有的页面，从加viewport开始。十分钟能见效。