网站得让手机和电脑都能正常看呗。现在很多人只用手机上网。你的网站如果在手机上排版错乱、字小得看不清，用户扭头就走。

这事不难，关键是方法对。

第一步，加一行代码。

在网页的head标签里加上这段：

html

没有它，手机浏览器会把网页当成电脑页面缩小显示，字小得像蚂蚁。加上它，页面宽度就跟手机屏幕一样宽了。

第二步，别写死宽度。

新手最常犯的错：给盒子写固定宽度，比如 `width: 960px`。手机屏幕才375像素宽，960的盒子直接撑破屏幕，出现横向滚动条。

换成百分比或最大宽度：

css
.container {


width: 100%;


max-width: 960px;


margin: 0 auto;


}

意思是：屏幕小就占满，屏幕大最多960像素，居中。一行搞定。

第三步，用媒体查询调布局。

电脑上一行放三个卡片没问题，手机上挤成一条就废了。用媒体查询按屏幕宽度换样式：

css
@media (max-width: 768px) {


.card {


width: 100%;


}


}

屏幕宽度小于768像素时，卡片改成占满一行。就这么简单。断点不用设太多，768和1024两个基本够用。

第四步，图片要听话。

图片默认按原始尺寸显示，大图能把手机屏幕撑爆。加一句：

css
img {


max-width: 100%;


height: auto;


}

图片最宽不超过容器，高度自动等比缩放。别忘了给图片加 `alt` 属性，图片加载失败时显示文字，盲人用户靠读屏软件也靠它。

第五步，字体别太小。

手机上看12像素的字很费劲。正文字体至少16像素。行高1.5以上，段落之间留点空。

测试方法。

写完别只看自己电脑。打开浏览器开发者工具，按F12，点左上角手机图标，切换不同设备尺寸看效果。先用iPhone SE这种小屏测，能过小屏基本就稳了。

最后一点拿真手机打开看一眼。模拟器跟真机有差别，真机最容易暴露问题。

常见坑。

横向滚动条：多半是某个元素宽度超了，检查有没有写死像素宽。

重叠：没设meta viewport标签，或者媒体查询断点写反了。

按钮点不到：手机上按钮至少44×44像素，手指没那么精细。

响应式说到底就一句话：别假设用户屏幕多宽。让布局跟着屏幕走，而不是让屏幕迁就你的设计。做到这一点，手机电脑都能看。