如何根据屏幕大小更改样式 - CSS

在响应式设计的时代，根据屏幕大小来调整样式已经成为了前端开发中非常基础的部分。CSS提供了多种方法来根据屏幕大小来设置样式，让我们来一一了解。

媒体查询

媒体查询可以根据不同设备屏幕大小和设备特性来应用不同的样式。它是基于 CSS3 的，这意味着它可能不被所有浏览器支持。

举个例子，在我们的样式文件中，我们可以这样写：

@media screen and (max-width:600px) {
  body {
    background-color: yellow;
  }
}

这段代码表示在屏幕宽度小于等于 600px 的屏幕上，body元素的背景颜色将会变成黄色。

媒体查询的各种条件可以组合起来使用，也可以选择省略某些项，具体使用方法可以参考MDN文档 CSS3 Media Queries。

viewport 长度单位

viewport 长度单位根据不同设备的屏幕大小来设置元素尺寸。viewport 长度单位被设计成和屏幕尺寸有关，而不是元素在文档中的位置。这使得我们可以根据屏幕大小而不仅仅是元素在文档中的位置来调整样式。

举个例子，在我们的样式文件中，我们可以这样写：

.my-element {
  font-size: 4vw;
}

这段代码中，4vw 表示元素字体大小是 viewport 宽度的 4%。在大屏幕上，字体会更大，而在小屏幕上字体会更小。

除了 vw，viewport 还支持 vh、vmin、vmax 等不同的单位，具体使用方法可以参考 MDN文档 Viewport units。

CSS框架

CSS框架可以帮助我们在不同屏幕大小下快速构建响应式网站。常用的 CSS 框架包括 Bootstrap、Foundation、Materialize 等等。

这些框架提供了许多预定义的 CSS 类和 UI 组件，使得开发人员可以很方便地创建响应式布局，并且在不同的屏幕上看起来都很好。

举个例子

在 Bootstrap 中，我们可以用以下代码来创建一个在不同屏幕尺寸下排列方式不同的栅格布局。

<div class="row">
  <div class="col-xs-12 col-md-6 col-lg-4"></div>
  <div class="col-xs-12 col-md-6 col-lg-4"></div>
  <div class="col-xs-12 col-md-6 col-lg-4"></div>
</div>

这里，每个 div 标签的设置中，col-xs-12 表示在所有屏幕尺寸下占据 12 个网格，col-md-6 表示在中等设备屏幕以上的尺寸，占据 6 个网格。

总结

以上是根据屏幕大小更改样式的三种方法，它们各有优缺点，可以根据实际情况选择使用。

参考文献：

• MDN-CSS3 Media Queries
• MDN-Viewport units
• Bootstrap