css媒体查询meta写法

CSS媒体查询是一项十分重要的技术，它可以让我们在不同设备上提供不同的样式。而媒体查询的核心便是标签。

这段代码告诉浏览器，在设备宽度为当前屏幕宽度时，文档的初始缩放级别为1。这意味着，当我们访问网页时，会自动缩放到适合设备的大小。

如果我们想要在用户缩放时保持样式的可读性，我们可以添加以下样式：

body {
  font-size: 16px;
}
@media screen and (min-width: 768px) {
  body {
    font-size: 20px;
  }
}

这段代码表示，当设备宽度不小于768px时，body元素的字体大小将增加到20px。而由于我们已经设置了标签，浏览器会根据当前设备调整缩放级别，从而保持可读性。

除此之外，我们还可以使用媒体查询来隐藏或显示特定内容，或针对不同设备提供不同的布局和样式。无论是响应式设计还是移动优先，媒体查询都是实现自适应的关键手段。