刚接触前端的人常常会遇到一个尴尬的场景：在自己电脑上写好的页面，换到笔记本或手机上打开，要么内容被裁掉一块，要么留下一大片空白。问题的根源在于布局写死了尺寸，没有做宽高自适应。所谓宽高自适应，就是让元素的宽度和高度能够根据屏幕大小、父容器尺寸或内容多少自动调整，这也是响应式页面的基础。本文将从基本原理讲到常用方案，再集中解答新手最容易踩坑的几个问题。
一、先弄懂基础：盒模型与默认行为
在动手写自适应布局之前，必须理解浏览器的两个默认规则。第一，块级元素（如<div>、<p>）在不设置宽度时，默认宽度是父容器的100%，高度则由内容撑开。这个特性意味着很多情况下你根本不需要写死宽度，让元素自然充满父容器即可。
第二，盒模型的计算方式会影响百分比宽度的实际效果。默认的content-box模式下，width只包含内容区，再加上padding和border后，实际占用宽度会超出设定值。推荐统一加上下面这段代码：
* {
box-sizing: border-box; /* 让padding和border计入width，计算更直观 */
}加上border-box之后，设置width: 50%就真的占父容器一半，不用担心内边距把它挤变形。这一步看似简单，却能避免后面大量的对不齐问题。
二、四种主流的自适应实现方案
1. 百分比布局
百分比是最容易理解的方式，宽高参照父元素计算。宽度用百分比非常好用，但高度用百分比有个坑：父元素高度必须先有一个明确值，否则子元素的height: 100%会失效。比如：
.parent {
height: 600px; /* 父级有明确高度 */
}
.child {
width: 50%;
height: 100%; /* 这时才生效 */
}如果父级高度也是靠内容撑开的，子级写100%就等于没写。解决办法见后文的vh单位或flex方案。
2. 视口单位vw和vh
vw和vh分别表示视口宽度和高度的百分之一，1vw等于视口宽度的1%。它不依赖父元素，直接参照浏览器窗口，特别适合做全屏区域：
.hero {
width: 100vw; /* 整个视口宽 */
height: 100vh; /* 整个视口高，经典的全屏首屏写法 */
}配合calc()函数还能做混合运算，比如height: calc(100vh - 60px)表示减去导航栏高度后剩余的屏幕空间，这在后台管理系统中非常常见。
3. 弹性盒子flex
flex布局是目前做自适应最推荐的方案。父元素设置display: flex后，子元素可以按比例分配空间：
.container {
display: flex;
}
.sidebar {
width: 200px; /* 侧边栏固定 */
flex-shrink: 0; /* 不被压缩 */
}
.main {
flex: 1; /* 剩余空间全部给主内容区 */
}再配合justify-content和align-items，水平垂直居中一行代码就能搞定，替代了早期各种hack写法。
4. 网格布局grid
grid更擅长二维布局，比如让内容区自动分成三列，屏幕变窄时自动减为两列：
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}这行代码的含义是：每列最小250像素，最大平均分配空间，放不下就自动换行。卡片列表、相册页面用这一个属性就能实现自动响应，不需要写任何媒体查询。
三、常见疑问解答与避坑要点
问题1：为什么height:100%不生效？
如前所述，百分比高度需要父级有确定高度。如果想让一个区域撑满整个屏幕，直接用height: 100vh最省事；如果想撑满某个flex容器，给子元素写flex: 1或者给父级指定高度即可。另外别忘了检查html和body是否被设置了高度，很多100%失效的根源在这两层。
问题2：图片如何自适应且不变形？
图片自适应的标准写法是宽度跟随容器、高度自动，再加上object-fit控制裁剪方式：
img {
width: 100%;
height: 200px;
object-fit: cover; /* 保持比例裁剪填满，不拉伸变形 */
}如果希望图片保持原始宽高比，也可以用aspect-ratio: 16 / 9属性直接声明比例，现代浏览器都已支持。
问题3：内容太少页面留白，内容太多又溢出怎么办？
善用min-width、max-width和min-height这组属性。经典的居中容器写法：
.wrapper {
width: 100%;
max-width: 1200px; /* 最大不超过1200px */
margin: 0 auto; /* 水平居中 */
}这样大屏幕下内容居中且不会无限拉伸，小屏幕下又能自动收缩。同理，给文字区域设置min-height而不是固定height，内容多时自动撑高，避免溢出被裁切。
问题4：需要在特定屏幕尺寸切换布局怎么办？
媒体查询依然是处理断点的利器，配合上面的方案使用：
.sidebar { width: 250px; }
@media (max-width: 768px) {
.sidebar {
width: 100%; /* 小屏时侧边栏变为占满整行 */
}
}实际项目中的建议是：优先用flex、grid和minmax这类天然自适应的手段，只在布局结构需要明显变化时才引入媒体查询，代码会更简洁也更容易维护。
总的来说，宽高自适应布局的核心思路是少写死尺寸，多用相对单位和弹性分配。先掌握盒模型和默认文档流行为，再熟练运用百分比、视口单位、flex和grid四把工具，最后记住几个高频坑点：百分比高度依赖父级、图片变形用object-fit解决、内容溢出用min和max约束。把这些要点吃透，大部分页面布局问题都能从容应对。