通过媒体查询和max-width可快速适配移动端，避免横向滚动。1. 使用@media调整容器宽度，如.screen<768px时.container设为width:100%；2. 用max-width替代width，使元素在窄屏自动收缩，如.column设max-width:300px、width:100%；3. 结合flex或grid改变布局排列，如移动端flex-direction:column实现上下堆叠。关键是控制元素不溢出屏幕，max-width兜底，媒体查询微调断点。
固定宽度布局在桌面端显示正常，但在移动端容易出现横向滚动或内容挤压。解决这个问题不需要完全重写布局，通过媒体查询和max-width可以快速实现兼容。
使用媒体查询调整移动端列宽
针对不同屏幕尺寸，用媒体查询动态调整容器和列的宽度。比如原本设置width: 960px的容器，在手机上应占满屏幕宽度。
.container {
width: 960px;
margin: 0 auto;
}
@media (max-width: 768px) {
.container {
width: 100%;
padding: 0 15px;
}
}
这样在屏幕小于768px时，容器自动适配为全宽并添加内边距，避免内容贴边。
用 max-width 替代 width 提升弹性
将固定width改为max-width，让元素在小屏幕上自动收缩。这对图片、卡片、侧栏特别有效。
立即学习“前端免费学习笔记（深入）”；
建议写法：
.column {
max-width: 300px;
width: 100%;
}
这样列最大不超过300px，但在窄屏下会随父容器缩小，不会溢出屏幕。
结合 flex 或 grid 实现响应式排列
在移动端可改变布局结构。例如桌面端两栏并排，移动端变为上下堆叠。
.columns {
display: flex;
gap: 20px;
}
@media (max-width: 768px) {
.columns {
flex-direction: column;
}
}
配合max-width控制单个列的最大尺寸，整体布局更自然。
基本上就这些。不复杂但容易忽略细节。关键是别让任何元素“撑破”屏幕，用max-width兜底，再用媒体查询微调断点，固定宽度也能很好适配移动端。
