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;
}
}
... und hier die PDF-Datei im Iframe mit der in der CSS eingetragenen id="myFrame" mit Anzeige ab 992px:<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>
<iframe id="myFrame" src="./PDF/Formular-Code.pdf" height="500"></iframe>