打开电脑是两栏，掏出手机就挤成一团呗。这种破事你肯定遇到过。今天不扯虚的，直接说怎么让网页自己适应屏幕。

第一步：加一句代码

打开你的HTML文件，在里面塞这行：

没这句，手机上所有东西都会缩成蚂蚁大小。加上它，浏览器才知道按设备宽度来排版。

第二步：别写死像素

把width: 960px这种写法扔了。换成百分比或者max-width。

.container {

width: 100%;

max-width: 1200px;

margin: 0 auto;

}

意思是：小屏幕占满，大屏幕最多1200像素，居中。简单粗暴。

第三步：图片要听话

给图片加一句max-width: 100%; height: auto;。图片就会缩到容器大小，不会撑破页面。顺手加上display: block;去掉底部那点莫名其妙的空隙。

第四步：媒体查询是核心

这是响应式的命根子。写法长这样：

@media (max-width: 768px) {

.sidebar { display: none; }

.main { width: 100%; }

}

翻译成人话：屏幕窄于768像素时，侧边栏藏起来，主占满。断点选768、1024这种常见值就行，别搞太多，两三个够用。

第五步：手机优先还是桌面优先

新手建议桌面优先。先写大屏样式，再用max-width往下砍。改起来直观，不容易乱。老手爱用手机优先，min-width往上加。两种都行，别混着用。

第六步：测试

浏览器按F12，点那个手机图标。拖宽度看布局啥时候崩。崩了就回去调断点。真机也要试，模拟器有时候骗人。

几个坑别踩

不要用`position: fixed`做导航栏，手机上会挡住。表格别硬塞，要么横向滚动，要么拆成卡片。字体别小于16px，否则手机用户得眯眼。

导航栏这么处理

桌面横排，手机变汉堡菜单。HTML结构不变，CSS换显示方式。用checkbox或者几行JS切换类名。别搞太复杂，能点开能关上就行。

最后呢说一句

响应式不是什么高深技术。核心就三样：灵活宽度、媒体查询、图片自适应。写完拖一拖浏览器边缘，不炸就算成。剩下的边做边调。