web-dev-qa-db-ja.com

モバイルビューでのみdivタグを非表示にしますか？

サイトの流動的なレイアウトを作成しています。モバイルビューで<div>または<div>自体のコンテンツを非表示にしようとしていますが、タブレットビューやデスクトップビューでは非表示にしようとしています。

ここに私が持っているものがあります...

#title_message {
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
}

モバイルレイアウトでディスプレイを「なし」に設定し、タブレット/デスクトップレイアウトでブロックとして設定しています...それを行う簡単な方法はありますか？

cssfluid-layout
55
KoldTurkee

次の2つが必要です。 1つ目は、特定のコードを特定の画面サイズでアクティブにする@media screenで、レスポンシブデザインに使用されます。 2番目は、visibility: hidden属性の使用です。ブラウザ/画面が600ピクセルに達すると、#title_messageは非表示になります。

@media screen and (max-width: 600px) {
  #title_message {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

編集：モバイル用に別のCSSを使用している場合は、visibility: hidden;を#title_messageに追加するだけです。これがあなたを助けることを願っています！

134
Matt

Displayプロパティをデフォルトとしてnoneに設定し、ブラウザが特定の幅に達したときにメディアクエリを使用して、目的のスタイルをdivに適用します。メディアクエリの768pxを、divが表示される最小のpx値に置き換えます。

#title_message {
    display: none;
}

@media screen and (min-width: 768px) {
    #title_message {
        clear: both;
        display: block;
        float: left;
        margin: 10px auto 5px 20px;
        width: 28%;
    }
}
4
Phil Sinatra
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { #title_message { display: none; }}

これは、特にiPhone画面用の単一ページを持つレスポンシブデザイン向けです。実際に別のモバイルページにルーティングしていますか？

3
Scarecrow

この例を参考にしてください。 cssファイルで：

.deskContent {
    background-image: url(../img/big-pic.png);
    width: 100%;
    height: 400px;
    background-repeat: no-repeat;
    background-size: contain; 
}

.phoneContent {
    background-image: url(../img/small-pic.png);
    width: 100%;
    height: 100px;
    background-repeat: no-repeat;
    background-size: contain;
}

@media all and (max-width: 959px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 479px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}

Htmlファイルで：

<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
1
J.C. Gras

与えられたソリューションはデスクトップ上では機能しませんでしたが、モバイルにはモバイルdivしか表示されませんでしたが、両方のdivが表示されました。そこで、少し検索して、min-widthオプションを見つけました。コードを次のように更新しましたが、今では正常に動作します:)

CSS：

    @media all and (min-width: 480px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 479px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}

HTML：

<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
1
Steve Hall

私はちょうどポジションを切り替えて私のために働いた（モバイルのみを表示）

<style>
 .MobileContent {

     display: none;
         text-align:center;

 }

@media screen and (max-width: 768px) {

 .MobileContent {

     display:block;

 }

}
</style>
<div class="MobileContent"> Something </div>
1
Carlos franco

これを試して

@media handheld{
    #title_message { display: none; }
}
0
Alejandro Ruiz Arias