div-tag alleen verbergen in mobiele weergave?

Ik maak een vloeiende lay-out voor een site. Ik probeer de inhoud van een <div>of de hele <div>zelf te verbergen in de mobiele weergave, maar niet in de tablet- en desktopweergave.

Dit is wat ik tot nu toe heb…

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

Ik heb de weergave ingesteld op ‘none’ voor de mobiele lay-out en ingesteld als blok op de tablet-/desktoplay-outs… Is er een eenvoudigere manier om dat te doen, of is dat het?

Antwoord 1, autoriteit 100%

Je hebt twee dingen nodig. De eerste is @media screenom de specifieke code op een bepaalde schermgrootte te activeren, die wordt gebruikt voor responsief ontwerp. De tweede is het gebruik van het visibility: hiddenattribuut. Zodra de browser/het scherm 600 pixels bereikt, wordt #title_messageverborgen.

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

EDIT: als je een andere CSS voor mobiel gebruikt, voeg dan gewoon de visibility: hidden;toe aan #title_message. Ik hoop dat dit je helpt!

Antwoord 2, autoriteit 4%

Stel de eigenschap display als standaard in op noneen gebruik vervolgens een mediaquery om de gewenste stijlen op de div toe te passen wanneer de browser een bepaalde breedte bereikt. Vervang 768pxin de mediaquery door de minimale px-waarde waar je div zichtbaar moet zijn.

#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%;
    }
}

Antwoord 3, autoriteit 3%

De gegeven oplossing werkte niet voor mij op de desktop, het toonde alleen beide div’s, hoewel de mobiel alleen de mobiele div liet zien. Dus ik deed een beetje zoeken en vond de min-width-optie. Ik heb mijn code geüpdatet naar het volgende en het werkt nu prima 🙂

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>

Antwoord 4, autoriteit 2%

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { #title_message { display: none; }}

Dit zou specifiek zijn voor een responsief ontwerp met een enkele pagina voor een iPhone-scherm. Routeert u daadwerkelijk naar een andere mobiele pagina?

Antwoord 5, autoriteit 2%

U kunt zich laten leiden door dit voorbeeld. Op je css-bestand:

.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;}
}

Op uw HTML-bestand:

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

6

Ik heb net geschakeld posities en werkte voor mij (alleen mobiel weergegeven)

<style>
 .MobileContent {
     display: none;
	 text-align:center;
 }
@media screen and (max-width: 768px) {
 .MobileContent {
     display:block;
 }
}
</style>
<div class="MobileContent"> Something </div>

@media handheld{
    #title_message { display: none; }
}