CSS 媒体查询：如何让网站响应

什么是响应式网站？

媒体查询

句法

媒体查询是当今 CSS 中最重要的概念。由于大多数用户使用手机或平板电脑访问网站，因此，打造响应式网站至关重要。

什么是响应式网站？

我们都听说过响应式网站很重要，或者你的客户需要一个响应式网站，但这最终意味着什么呢？响应式网站是指你的网站具有响应能力，这意味着你的网站在桌面、移动设备或平板电脑上都能保持良好的显示效果。

为了使用 CSS 制作响应式网站，我们使用@media媒体查询。

媒体查询

媒体查询用于根据屏幕尺寸、方向或分辨率添加不同的样式。如果正在打印或用户正在使用屏幕阅读器，您甚至可以更改网站的样式。

句法

@media (condition) {
  CSS styles;
}

因此，我们开始使用媒体查询@media，之后我们必须提供条件，或者您可以检查媒体设备。我们来举几个例子。

如果您想在屏幕宽度为 500px 或更小时添加不同的样式。

@media screen and (max-width: 500px){
   .element{
       styles;
   }
}

在上面的例子中，@media我们使用了screen关键字，这表示您正在检查屏幕。您也可以输入all | print | speech。之后，您会看到and关键字，这and意味着只要有屏幕，并且条件为真，就应用样式。最后是条件。

但是，尽管我们有很多关键词和媒体类型，我通常使用这种语法来进行响应式设计。

@media (max-width: 500px){
   .element{
      stylessss;
   }
}

这些条件被称为断点。对于响应式网站，我们主要使用两个条件：

1. max-width：这意味着如果您说max-width:500px那么以下样式仅当视口宽度为 500px 或更小时才会应用。

2. min-width：这是相反的max-width。这意味着如果您说，min-width:500px则仅当视口宽度为 500px 或更大时，才会应用以下样式。

关于媒体查询就讲到这里。但对于响应式设计，你应该了解一些常见的断点。

/* Extra small devices (phones, 600px and down) */
@media (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media (min-width: 1200px) {...}

我希望您理解媒体查询。如果您有任何疑问，请随时在评论部分询问我。

您还可以阅读CSS 位置或CSS 弹性框

如果您想练习 CSS，可以查看我在 YouTube 上关于响应式Instagram UI克隆的视频。

如果你喜欢，可以订阅我的 YouTube 频道，并在 Instagram 上关注我。我创作了精彩的网络内容。[订阅]，[ Instagram ]

感谢您的阅读。