web-dev-qa-db-ja.com

のみのCSSを使用してブラウザのサイズに基づいてdivを表示/非表示？

私は、CSSメディアクエリのみを使用して、ブラウザのサイズに基づいていくつかのdivを表示/非表示にしようとしています...しかし、何も機能していないようです...できれば助けて、私が間違っていることを教えてください。 .. 前もって感謝します！

私のCSS。

@media all and (max-width: 959px) {

    .content .700{display:block;}
    .content .490{display:none;}
    .content .290{display:none;}

}

@media all and (max-width: 720px) {

    .content .700{display:none;}
    .content .490{display:block;}
    .content .290{display:none;}

}

@media all and (max-width: 479px) {

    .content .700{display:none;}
    .content .490{display:none;}
    .content .290{display:block;}

}

ここに私のhtmlがあります

<div class="content">
    <div class="700">this is the content for desktop</div>
    <div class="490">this is the content for tablet</div>
    <div class="290">this is the content for mobile</div>
</div>
cssmedia-queriesmediashow-hide
19
JStormThaKid

クラス名は数字で始めることはできません。それを変更しますx700、x490、x290、それは動作するはずです

20
Jerzy Zawadzki

class nameを数字にすることはできず、CSSの数字から始めることはできません。クラス名を変更した例がありますが、それはうまく機能しています

http://jsfiddle.net/RtTsy/

6
Hushme