如何设置网页尺寸以适配不同PC端屏幕？

为什么屏幕适配如此重要？

奥利给！ 我们面对的用户设备种类繁多，从13寸的笔记本到27寸的超宽屏显示器，屏幕尺寸的多样性让网页设计变得复杂而富有挑战。你是否曾主要原因是网页在不同屏幕上显示错乱而感到头疼？你是否在调试样式时发现原本设计精美的页面在某些分辨率下变得“面目全非”？

不堪入目。 其实这正是网页适配问题的核心所在。我们不再能假设所有用户都使用相同的屏幕尺寸。所以呢，如何设置网页尺寸以适配不同PC端屏幕，已经从“可选项”变成了“必修课”。

从固定宽度到响应式布局

在早期的网页设计中， 我们常常使用固定宽度来布局页面比如1280px或1920px。这种方式在当时看似稳妥，但因为屏幕尺寸的多样化，这种一刀切的做法已经不再适用。现代网页设计更倾向于使用响应式布局，通过CSS的媒体查询来页面结构，以适应不同尺寸的屏幕。

响应式设计的核心思想是：让网页在不同设备上都能优雅地展示。这不仅包括手机、平板，也包括不同尺寸的PC屏幕。通过使用CSS的 @media 查询， 我怀疑... 我们可以为不同屏幕尺寸设置不同的样式规则，从而实现真正的“自适应”。

媒体查询：适配的利器

媒体查询是现代网页设计中不可或缺的工具。通过它，我们可以根据屏幕宽度、高度、方向等条件，动态应用不同的样式规则。比方说：

@media screen and  {
  .container {
    width: 1200px;
    margin: 0 auto;
  }
}

上面的代码表示， 当屏幕宽度大于等于1200px时页面容器的宽度将被设置为1200px，并居中显示。这在大屏设备上能有效提升页面的可读性与美观度。

通过媒体查询，我们可以为不同尺寸的屏幕设置不同的样式，从而实现页面的自适应。