メディアクエリはCSSの最後に配置されている場合にのみ機能します。

私は、CSSを学んだし、私は次のコードがある例に出くわした：メディアクエリはCSSの最後に配置されている場合にのみ機能します。

<body> 
    <a href="#" class="CardLink CardLink_Hearts">Hearts</a> 
    <a href="#" class="CardLink CardLink_Clubs">Clubs</a> 
    <a href="#" class="CardLink CardLink_Spades">Spades</a> 
    <a href="#" class="CardLink CardLink_Diamonds">Diamonds</a> 
</body>

とCSSを：

.CardLink { 
    display: block; 
    color: #666; 
    text-shadow: 0 2px 0 #efefef; 
    text-decoration: none; 
    height: 2.75rem; 
    line-height: 2.75rem; 
    border-bottom: 1px solid #bbb; 
    position: relative; 
} 

@media (min-width: 300px) { 
    .CardLink { 
     padding-left: 1.8rem; 
     font-size: 1.6rem; 
    } 

    .CardLink:before { 
     display: block; 
    } 
} 

.CardLink:before { 
    display: none; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    left: 0; 
} 

.CardLink_Hearts:before { 
    content: "❤"; 
} 

.CardLink_Clubs:before { 
    content: "♣"; 
} 

.CardLink_Spades:before { 
    content: "♠"; 
} 

.CardLink_Diamonds:before { 
    content: "♦"; 
} 

/*@media (min-width: 300px) { 
    .CardLink:before { 
     display: block; 
    } 
}*/

ビューポートのサイズは300個のピクセル、カードのアイコンの下にあるときにアイデアがあります表示されない場合は表示されます。

私はコードを使いこなしていましたが、私は@media (min-width: 300px)を2回定義しなければならない理由を理解できません。

私たちは、CSSの最後の段落のコードを、メディア画面のサイズが属するセクションに置くことができません。なぜなら、これをもう一度宣言するのではなく、コードを再利用するのが良いでしょうか？

これを行うとアイコンが表示されません（これは以下のコードです）。

誰でも説明できますか？ https://plnkr.co/edit/MJAPdkgUegpUlJnkcQHg?p=previewそれは配置についてです

出典

2016-05-12 Dodi

OKになりますカスケードスタイルシート。

カスケードは滝のようなものです。レンダリングエンジンは、ソースドキュメントの先頭から始まり、途中で動作します。

この場合、メディアクエリが表示されます。それから、あなたのコードの残りの部分が見えます。

たとえば、のは、あなたのスタイルシートがこれを持っていたとしましょう：

div { color: red; } 

div { color: blue; } 

div { color: red; }

あなたのテキストの色が赤になります。この場合

：

div { color: red; } 

div { color: blue; }

あなたのテキストの色が青になります。

どちらの場合でも、CSSはスタイルシートの最後の宣言を選択します。

メディアクエリを優先する場合は、コードの最後に配置します。

（単純なようで、多くの場合、それがある。ちょうど約CSS specificityを学ぶことを確認してください。）これを説明するための

出典

2016-05-12 14:32:18

感謝 – Dodi

は、後にメディアクエリを置く：plunkerを確認し、これは期待どおりに動作の前に、あなたが作業しているので、それは

.CardLink { 
 
    display: block; 
 
    color: #666; 
 
    text-shadow: 0 2px 0 #efefef; 
 
    text-decoration: none; 
 
    height: 2.75rem; 
 
    line-height: 2.75rem; 
 
    border-bottom: 1px solid #bbb; 
 
    position: relative; 
 
} 
 
.CardLink:before { 
 
    display: none; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    left: 0; 
 
} 
 
.CardLink_Hearts:before { 
 
    content: "❤"; 
 
} 
 
.CardLink_Clubs:before { 
 
    content: "♣"; 
 
} 
 
.CardLink_Spades:before { 
 
    content: "♠"; 
 
} 
 
.CardLink_Diamonds:before { 
 
    content: "♦"; 
 
} 
 
@media (min-width: 300px) { 
 
    .CardLink { 
 
    padding-left: 1.8rem; 
 
    font-size: 1.6rem; 
 
    } 
 
    .CardLink:before { 
 
    display: block; 
 
    } 
 
}

<a href="#" class="CardLink CardLink_Hearts">Hearts</a> 
 
<a href="#" class="CardLink CardLink_Clubs">Clubs</a> 
 
<a href="#" class="CardLink CardLink_Spades">Spades</a> 
 
<a href="#" class="CardLink CardLink_Diamonds">Diamonds</a>

出典

2016-05-12 14:26:04

メディアクエリはCSSの最後に配置されている場合にのみ機能します。

答えて

関連する問題