网站得让手机、平板、电脑都能正常看呗。这事儿叫响应式。下面说怎么弄。

第一步，加个meta标签。写在head里：

这行字告诉浏览器：按设备实际宽度来，别缩。

第二步，别写死宽度。以前有人爱写width:960px，现在别这么干。用百分比或者max-width。比如：

.container { width: 90%; max-width: 1200px; margin: 0 auto; }

这样大屏不撑太宽，小屏也不挤。

第三步，图片要听话。给img加一句：

img { max-width: 100%; height: auto; }

图片就不会超出屏幕。最好用srcset备几套尺寸，手机下小图，省流量。

第四步，用媒体查询调布局。这是核心。先做手机样式，再往上加。比如：

.box { width: 100%; }

@media (min-width: 768px) {

.box { width: 50%; float: left; }

}

手机上一列，平板两列。断点别贪多，768、1024两个够用。

第五步，导航栏要变。手机上藏起来，点按钮再出来。写个汉堡按钮，加段JS切换class，CSS控制显示隐藏。别搞太花，能点开就行。

第六步，字体别太小。手机上看12px费眼，正文16px起步。行高1.5左右，读着舒服。

第七步，留白要够。手指头比鼠标粗，按钮和链接得留出点击空间。padding给足，别让用户点错。

第八步，测试。浏览器开发者工具里有个手机图标，点开就能模拟。但真机也得试。安卓、苹果各拿一个，横竖屏都转转。重点看：字会不会溢出，按钮好不好点，图片有没有变形。

最后一点说个坑。别用绝对定位做整体布局。一换屏幕就乱。老老实实用flex或者grid，省心。

flex简单：display:flex; flex-wrap:wrap; 子元素给个flex:1 1 300px，自动换行。

grid也行：display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 一行代码搞定自适应列数。

响应式不难，记住三条：别写死宽度，图片别超界，断点调布局。多拿手机看看，哪别扭改哪。