css - 在 css 属性中使用媒体

Question

CSS

<link rel="stylesheet" type="text/css"  media="screen and (max-width: 480px)"  href="example.css">

此 css 属性中 media="screen and (max-width: 480px) 的用途是什么。这与 @media only screen (max-width: 480px) 相关吗？ 在 css body 中。请解释一下。我真的不明白。

如果是，

CSS

   /* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width:8.33%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width:8.33%;}
}

我的 CSS 主体中有移动设备、桌面设备和平板电脑的三种格式。在这种类型中，我将如何放置它。我需要在我的 css 属性中放置多个媒体标签吗？

Answer 1

是的，它是相关的。

您可以通过几种方式使用媒体查询。

您可以在您编写的 CSS 正文中声明一些样式:

@media only screen (max-width: 480px)

或者您可以在 html 中指定在哪种情况下将使用哪个 .css 文件:

<link rel="stylesheet" type="text/css"  media="screen and (max-width: 480px)"  href="example.css">

因此您可以通过多种方式使用媒体查询。我建议你，当你有几行 css 代码要放入媒体时 - 在 css 主体中使用这种内联形式。当您想放置大量代码时 - 最好将其重构为不同的文件。代码将更加干净和体面。