打开一个网页，发现文字挤成一团，图片横着溢出屏幕，或者右边空一大片——这时候你可能就在想：网页大小怎么调整？其实这问题背后分好几种情况，得看你是想临时缩放页面、改浏览器窗口尺寸，还是真正在写代码时控制网页显示区域。
浏览器里临时调大调小网页
最常用的方法是用快捷键。Windows 或 Linux 上按 Ctrl + +（加号）放大，Ctrl + -（减号）缩小，Ctrl + 0 恢复默认比例。Mac 用户换成 Cmd 键就行。这个操作不改网页本身，只影响你当前看到的渲染效果，就像给整个页面套了个放大镜。
右键网页空白处，也能点「缩放」菜单选具体比例，比如 125%、90%，适合视力不好或屏幕太小的时候用。
改浏览器窗口大小，也会影响网页表现
把浏览器窗口拖小一点，有些网站会自动把导航栏收成三道杠，图片变窄，文字换行——这不是网页自己在“动”，而是它提前写了规则，告诉浏览器：“你变小了，我也跟着变”。这种能力叫响应式设计，核心就是 CSS 里的媒体查询（media query）。
比如这段代码，让宽度小于 768px 的设备用窄版布局：
@media (max-width: 768px) {
.header {
font-size: 14px;
}
.nav {
display: none;
}
}真正写网页时，怎么设定“大小”？
很多人误以为设个 <body style="width: 1200px"> 就能固定网页宽度，其实 body 默认是撑满整个视口的。更靠谱的做法是在中间加个容器层：
<div class="wrapper">
<h1>欢迎来到网络课堂</h1>
<p>这里讲最实在的网络知识</p>
</div>再配上 CSS：
.wrapper {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}这样既能在大屏上铺开到 1200px，又能在手机上自动缩到 100% 宽，两边还有留白，看着舒服。
别忘了 viewport 这个关键设置
如果你在手机上看自己写的网页，发现它被缩得很小、要双指放大才能看清，大概率是漏了这行代码。把它加进 HTML 的 <head> 里：
<meta name="viewport" content="width=device-width, initial-scale=1.0">意思是：“以设备实际宽度为基准，初始不缩放”。没有它，手机浏览器会假装自己是桌面版（比如 980px 宽），然后把整个网页缩小塞进去，结果字小图糊。
顺便说说“网页大小”常被误解的点
有人问“怎么把网页调成 1920×1080”？注意：网页不是图片，它没有固定分辨率。你设的只是内容区域的参考宽度，最终显示多大，取决于用户设备、缩放设置、字体渲染方式，甚至系统 DPI。所以与其死磕像素数，不如学会用 rem、%、vw 这些相对单位，让网页自己适应。
比如：width: 80vw 表示占屏幕可视宽度的 80%，font-size: 1.2rem 表示基于根元素字体大小的 1.2 倍——这些才是现代网页调“大小”的常用思路。