|
Deshalb gibt es den @media Befehl. Mit @media screen and (max-width: 42em) legen Sie die Größe für das Smartphone fest und mit @media screen and (max-width: 64em) die Größe für das Tablet. Jedoch müssen Sie die Begriffe noch modifizieren. Unten sehen Sie einige Beispiele. wie das funktioniert. |
| @media - Bildschirmgrößen | |||
| Befehl | Beschreibung | Wert | Beispiel |
| @media screen and (max-width: 64em) |
{@media 64em!
Das ist die Konfiguration für das Tablet. Mit den #img legen Sie fest, dass das nur auf die mit id=/xyz/ gekennzeichnete Stellen anzuwenden ist. Mit dem img legen Sie fest, daß alle Bilder auf dem Tablet so angezeigt werden. #img {background-image: url("Bilder/plakat.jpg"); width: 100%; background-color: blue; height: 300px; background-size: 300px; text-align:center;} }img Befehl Das ist die Ko ist img {backgrou nd-ima}img Befehl Das ist die Ko ist #pic {left:50em;top:20em;}#pic Befehl agaga agagaga sjjdjdjd } |
<header id="header"> <div id="p4" style="left: 1%;top: 7em;position:absolute;height: 2em;width: 5.6em; right: 1290px;"> <img src="Bilder/hknlogo.png" style="width: 100%;height:auto;" alt="diedVIPs" /></div> <img id="img" src="Bilder/space.gif" height="5px" width="20" /> <tr><td class="auto-style2" style="width: auto" valign="top" rowspan="2"></td></tr> <div id="style" style="left: 15%; top: 1em;position:absolute;height: 4.6em; width: 22.6em"></div> <span style="font-family: 'Princess Sofia', cursive; font-size:1.5em; float:left"></span> <table id="table" align="center" style="width: 90%"> ... </table> <tr><th class="auto-style36"><div id="output"><?php include("search.php");?></th></tr> <p><input type="search" name="q" id="suchbegriff" value="Suchbegriff" placeholder="Suchen" /></p> <div style="left: 15%; top: 9em; position: absolute; width: 35em; color: #790D97;"></div> <div id="h1"><h1 style="font-size: 1.5em; float: left"><strong>Tipps für den Homepage-Designer</strong></h1></div/> |
|
| @media screen and (max-width: 42em) |
{@media 42em!
Das ist die Ko ist #media {width: 100%;}nix fertig tr, th, td {display: block;}@media 42em! Das ist die Ko ist link {font-size: 5em;}nix fertig #img { height: 10px;}@media 42em! Das ist die Ko ist img { height: 100%;}nix fertig #table {width:100%; float: left; border-width: 2px;}@media 42em! Das ist die Ko ist #media {width: 100%;}nix fertig tr, th, td {display: block;}@media 42em! Das ist die Ko ist h1 {font-size: 0.6em;}nix fertig p4 {font-size: 1em;}@media 42em! Das ist die Ko ist #p {font-size:1.5em; text-align: left;}nix fertig #header {width: 100%;}nix fertig div {left: 50em; top: 20em;}@media 42em! Das ist die Ko ist #style {left: 30%;}@media 42em! Das ist die Ko ist |
||
Kontakt Datenschutz Impressum | |
Im Grunde genommen, gibt es drei verschiedene Bildschirmgrößen. Die für den PC, das Tablet und das Smartphone. Jede für den PC
geschriebene Seite sieht jedoch auf den anderen Geräten vollkommen anders aus.