打开手机浏览器，访问一个网站，结果文字小得要凑近屏幕才能看清，图片还错位了——这种体验太常见。问题出在哪？多半是网页没做好响应式布局。现在人用手机、平板、电脑来回切换，页面如果不能自动适应屏幕，用户转身就走。
从 viewport 开始打基础
很多响应式问题，其实一开始就没设对。在 HTML 的 <head> 里加上这行代码，告诉浏览器别自作聪明缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0">没了这句，手机加载桌面版页面时会先按大屏渲染，再整体缩小，导致内容挤成一团。
用 CSS 媒体查询灵活调整
媒体查询（Media Queries）是响应式的核心工具。它能根据屏幕宽度执行不同的样式规则。比如，让导航栏在小屏上变成折叠菜单：
@media (max-width: 768px) {
.nav-menu {
flex-direction: column;
display: none;
}
.nav-menu.active {
display: flex;
}
}768px 是常见的平板与手机分界线，实际设置可以根据设计稿调整。
弹性布局比浮动更省心
过去用 float 做多列布局，遇到屏幕变小就得重写一堆代码。现在用 Flexbox，容器内的元素能自动换行、对齐：
.container {
display: flex;
flex-wrap: wrap;
}
.box {
flex: 1 1 300px;
}这里每个盒子最小宽度 300px，空间不够时自动换行，不用单独写断点也能应对不同设备。
图片和视频也得跟上节奏
一张大图在手机上撑破布局，很影响体验。给媒体元素加个最大宽度，让它随容器缩放：
img, video {
max-width: 100%;
height: auto;
}这样无论图片放在什么尺寸的盒子里，都不会溢出边界。
移动端优先的设计思路
别总盯着电脑端效果。先在小屏幕上写样式，再用 min-width 逐步增加大屏适配规则。这样代码更简洁，也避免在小屏上覆盖过多冗余样式。
/* 手机默认样式 */
.card { padding: 10px; }
/* 平板及以上 */
@media (min-width: 768px) {
.card { padding: 20px; }
}
/* 桌面大屏 */
@media (min-width: 1024px) {
.card { flex-basis: 33.3%; }
}现在很多框架如 Bootstrap、Tailwind 都内置了响应式类，但懂底层原理才能灵活应对定制需求。真正的响应式不只是“能看”，而是让用户在哪种设备上都感觉自然顺手。