做网站，别再用固定宽度了。用户可能在用手机、平板、笔记本，甚至电视看你的页面。固定宽度意味着有人得左右拖动，体验很差。响应式网站就是让页面自己适应屏幕，不管多大都能正常显示。

下面直接说怎么做。

第一步，在HTML头部加一行代码：

html

这行代码告诉浏览器，页面宽度跟着设备走。不加它，手机浏览器会假装自己是桌面，把页面缩小显示，字小得看不清。

第二步，别把宽度写死。用百分比或者`max-width`。

css
.container {


width: 100%;


max-width: 1200px;


margin: 0 auto;


}

这样容器最宽1200像素，屏幕小了就自动缩。图片也一样，加一句`img { max-width: 100%; height: auto; }`，图片就不会撑破布局。

第三步，用媒体查询。这是响应式的核心。简单说就是：屏幕宽到一定程度，用这套样式；窄到一定程度，换另一套。

css
/ 默认手机样式 /


.card { width: 100%; }


/ 屏幕宽于768px时 /


@media (min-width: 768px) {


.card { width: 48%; float: left; margin-right: 2%; }


}


/ 屏幕宽于1200px时 /


@media (min-width: 1200px) {


.card { width: 23%; }


}

注意顺序：先写小屏幕，再写大屏幕。这叫移动优先，代码更干净。

第四步，导航栏换成汉堡菜单。手机上横排链接放不下，隐藏起来，点按钮再展开。用一点JavaScript就行：

html
菜单

css
.menu-btn { display: block; }


.nav { display: none; }


.nav.open { display: block; }


@media (min-width: 768px) {


.menu-btn { display: none; }


.nav { display: flex; }


}

javascript
document.querySelector('.menu-btn').addEventListener('click', function() {


document.querySelector('.nav').classList.toggle('open');


});

第五步，字体也别写死。用`rem`单位。`1rem`默认16像素，用户系统字号调大了，页面跟着变。用`2rem`，正文用`1rem`，比写死`24px`、`16px`灵活。

第六步，测试。别只在电脑上缩窗口看。用浏览器开发者工具切设备模式，挨个看手机、平板尺寸。重点查三件事：有没有横向滚动条、字能不能看清、按钮点不点得到。

最后呢说个常见坑：别忘了表格和长单词。表格加`overflow-x: auto`，长单词加`word-break: break-word`。不然窄屏幕上它们能把布局撑烂。

按这几步走，一个能用的响应式页面就出来了。不用框架也能做，先把原理弄明白，再考虑工具。