利用媒体

Question

CSS

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

什么是在这个CSS属性的使用media="screen and (max-width: 480px)。这与css正文中的@media only screen (max-width: 480px)有关。 请解释一下。我真的不明白。

如果是的话，

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

是的，它的相关。

您可以通过几种方式使用media queries。

可以在CSS身体为您所著声明一些stylles：

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

也可以在HTML中.css文件specife将使用哪种情况：

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

这样你就可以以多种方式使用媒体查询。 我建议你，当你有几行CSS代码放入媒体 - 在css正文中使用这种内联形式。当你想要放大量的代码时，最好把它重构成不同的文件。代码将更加干净和体面。