利用媒體

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正文中使用這種內聯形式。當你想要放大量的代碼時，最好把它重構成不同的文件。代碼將更加乾淨和體面。