做网站，先别想多漂亮。打开手机看看。字太小，点不准，图片撑破屏幕，用户三秒就关掉。响应式网站就是让同一个页面在手机、平板、电脑上都能正常用。今天说怎么动手做。

第一步，加这行代码进head里：

html

没它，手机浏览器会把页面当电脑版缩放着显示，字小得没法看。这是很多新手漏掉的第一件事。

第二步，别写死宽度。`width: 960px`这种写法直接扔掉。容器用百分比或`max-width`：

css
.container {


width: 90%;


max-width: 1100px;


margin: 0 auto;


}

屏幕宽，容器撑到1100px就停。屏幕窄，一直是屏宽的90%。左右留白自动居中。

第三步，图片要听话：

css
img {


max-width: 100%;


height: auto;


}

图片最大不超过容器，高度按比例缩。不写这个，大图会把手机页面撑出横向滚动条。

第四步，用媒体查询换布局。桌面端三栏，手机端一栏：

css
.col { width: 33.33%; float: left; }


@media (max-width: 768px) {


.col { width: 100%; float: none; }


}

768px是常用分界点。屏幕窄于它，三栏叠成一栏，手指滑着看。别把断点设太多，两三个够用，设多了自己都记不住哪条对哪个尺寸。

第五步，字体别用固定像素。`font-size: 16px`在手机上偏大，电脑上偏小。换成：

css
body { font-size: 1rem; }

或者用`clamp()`让字号跟着屏幕变：

css
h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }

小屏最小1.5rem，大屏最大2.5rem，中间随屏宽自动调。

第六步，按钮和链接要够大。手机上手指点，不是鼠标。可点区域至少44×44像素：

css
button, a.btn {


min-height: 44px;


min-width: 44px;


padding: 10px 16px;


}

按钮挨太近会点错。上下留出足够空隙。

第七步，别用hover做关键交互。手机没有鼠标悬停。下拉菜单靠hover展开，手机上根本打不开。改用点击切换，或者直接把菜单铺开显示。

最后一点，自己测。电脑上把浏览器窗口拖窄，看布局在哪一步乱掉。再用真手机打开，横竖屏各看一遍。Chrome开发者工具里的设备模拟能用，但真机最准。

响应式不是加个meta标签就完事。宽度用百分比，图片限最大宽，断点换布局，字号跟着屏幕走，点击区域留够。这五件事做到位，网站基本不会在手机上出洋相。剩下的，边做边调。