使用

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ボディでモバイル、デスクトップとタブレットのための3つのギを持っています。このタイプではどうやって入れますか？私はCSSの属性に複数のメディアタグを置く必要がありますか？

Answer 1

はい、それに関連しています。

media queriesはいくつかの方法で使用できます。

あなたはwritedとしてあなたはCSS本体に何らかのstyllesを宣言することができます。

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

またはファイルがどのような状況で使用されます.CSS HTMLでspecifeことができます。

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

そうすることができますが複数の方法でメディアクエリを使用します。 私は、あなたがメディアに入れるためのCSSコードのいくつかの行を持っているときにあなたにお勧めします - このインラインフォームをCSS本体で使用してください。コードを大量に配置したいときは、これを別のファイルにリファクタリングする方が良いでしょう。コードはよりクリーンでまともなものになります。