Wie zu verstecken (deaktivieren) alles von Desktop zu mobilen CSS-Übergang

-1

Ich möchte @media verwenden, um einige Blockelemente von der Desktop-Version auf mobile "ausblenden", so dass die "versteckten" Elemente Verkehr nicht essen.Wie zu verstecken (deaktivieren) alles von Desktop zu mobilen CSS-Übergang

Diese "Blockelemente" enthalten offensichtlich viele Daten, einschließlich Bilder, Inline-Blockelemente, Blockelemente usw. All dies sollte in der mobilen Version nicht heruntergeladen werden. Und gut, ich frage mich, ob es möglich ist, dies mit der @media Regel zu erreichen. Soweit ich das beurteilen kann, löst die display: none dieses Problem nicht, aber vielleicht irre ich mich.

P.S. Codebeispiel:

<div class="desktop"> 
... 
<div ... > ... </div> 
<span ... > ... </span> 
... 
</div> 
<div class="mobile"> 
... 
<div ... > ... </div> 
<span ... > ... </span> 
... 
</div> 

@media (max-width:799px){ 
    .desktop { display: none; } 
} 
@media (min-width:800px){ 
    .mobile { display: none; } 
}

Quelle

2016-05-30 bogiwa

Kann ich den Code, den Sie ausblenden möchten, einschließlich einer jsFiddle-Verknüpfung mit dem in Frage stehenden Code sehen? – Nitesh

Danke für das Abstimmen ohne Grund :) – bogiwa

Nathan L, es kann wirklich alles sein. Aber ich habe nichts dagegen, ein Beispiel zu geben, sicher – bogiwa

Elemente werden geladen, auch mit einem display:none (sie geladen werden aber nicht angezeigt), könnten Sie JQuery verwenden, um einige Teile Ihrer Website zu generieren:

$(document).ready(function() { 
 
    if (window.matchMedia('(max-width: 767px)').matches) { 
 
     $("#mobile").html("mobile!"); 
 
    } else { 
 
     $("#desktop").html("desktop!"); 
 
    } 
 
});

<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <meta name="viewport" content="width=device-width" /> 
 
</head> 
 

 
<div id="mobile"></div> 
 
<div id="desktop"></div>

Auf Mobilgeräten würde der HTML-Code wie folgt aussehen:

<div id="mobile">Mobile!</div> 
<div id="desktop"></div>

auf dem Desktop wie folgt aus:

<div id="mobile"></div> 
<div id="desktop">Desktop</div>

Ich weiß nicht, ob es eine bessere Lösung ist, aber ich hoffe, meine Antwort Ihnen helfen.

Quelle

2016-05-30 11:17:07

Wie zu verstecken (deaktivieren) alles von Desktop zu mobilen CSS-Übergang

Antwort

Verwandte Themen