Media Anweisungen für Display-Größen

CSS und andere hilfreiche Anweisungen
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Media Anweisungen für Display-Größen

Ungelesener Beitrag von Tommy Herrmann »

Mobirise nutzt ja für seine Media-Anweisungen die Breakpoints von Bootstrap in fast allen Blöcken:

https://getbootstrap.com/docs/5.0/layou ... reakpoints

Damit ist es dann über diese CSS Media-Abfragen möglich, bestimmten Displaygrößen bestimmte Anweisungen mitzugeben. So kann man z.B. an unterschiedlichen Geräten andere Formatierungen einsetzen oder z.B. auch andere Elemente anzeigen oder ausblenden.


Hier mal ein Beispiel einer Anwendung auf einer meiner Seiten:

https://www.mobirise-tutorials.com/Form ... mular.html

Dort zeige ich in einem Iframe (Inlineframe) eine PDF-Datei mit dem Quellcode eines Formulars an.


Da nun aber ein mobiles Gerät eine PDF-Datei sofort erkennt und öffnen will und diese nicht im Iframe anzeigen kann, wollte ich das automatische Öffnen unterbinden und dort, in diesem Fall bis zu einer Displaybreite von 991px, anstelle des Inlineframes, einen Textlink anzeigen.

Es wird also in meinem Beispiel ab 992px kein Textlink mehr gezeigt, sondern das Iframe mit der id="myFrame" bis zu einer maximalen Breite von 90%. Andererseits wird bis maximal 991px das Iframe nicht mehr angezeigt (display none) sondern der Textlink.

Die @media Anweisung beinhaltet also immer die minimale und/oder maximale Pixel-Breite eines Geräte-Displays.

Hier meine CSS im Bereich "CSS Editor" vom "Code Editor":

Code: Alles auswählen

@media (min-width: 992px) {
  #zeigeLink {
    display: none;
  }
}
#myFrame {
  width: 90%;
  margin-bottom: 50px;
}
@media (max-width: 991px) {
  #myFrame {
    display: none;
    margin-bottom: 0px;
  }
}
Hier dann der Textlink zur PDF-Datei am mobilen Gerät mit meiner id="zeigeLink" mit Anzeige bis 991px:
<p id="zeigeLink"><a href="http://www.mobirise-tutorials.com/Formu ... r-Code.pdf" target="_blank" class="text-primary"><span class="mbri-mobile mbr-iconfont mbr-iconfont-btn"></span>Hier klicken um die PDF-Datei am Handy und mobilen Gerät zu betrachten</a>.</p>
... und hier die PDF-Datei im Iframe mit der in der CSS eingetragenen id="myFrame" mit Anzeige ab 992px:
<iframe id="myFrame" src="./PDF/Formular-Code.pdf" height="500"></iframe>
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 13 Gäste