diedVIPs
diedVIPs

html knowhow

Media Anweisung  <media>






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.

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.

Die Befehle für die @media-Anwendungen sind im Prinzip identisch mit den CSS-Befehlen, beziehen sich jedoch lediglich auf die @media-Angaben.

Unten sehen Sie einige Beispiele. wie das funktioniert.




So sieht beispielsweise ein @media-Menü aus

<style type="text/css">
@media screen and (max-width: 42em) {
table {width: 95%;}
tr, td {display: block;}
#table {display: block;}
h1 {font-size: 0.4em;float:right}
h2 {font-size: 0.9em;float:right}
h3 {font-size: 1.5em;float:left}
body {width:800px;font-size:2em;}
#p {float:right}
#div {float:right}  }

css-Daten hier

</style>




Beispiele
 
@media screen and (max-width: 64em)    {
Das ist die Konfiguration für das Tablet.
 
#img
z.B.: #img {background-image: url("Bilder/plakat.jpg"); width: 100%; background-color: blue; height: 300px;} - (Aufruf mit id="img")
Mit den #img legen Sie fest, dass das nur auf die mit id="xyz" gekennzeichnete Bilder anzuwenden ist.
 
img
z.B.: img {background-image}
Mit dem img legen Sie fest, daß alle Bilder auf dem Tablet so angezeigt werden.
 
#pic
z.B.: #pic {left:50em;top:20em;} - (Aufruf mit id="pic")
 
 
@media screen and (max-width: 42em) 
z.B.: @media screen and (max-width: 42em)   {
Das ist die Konfiguration für das Smartphone
 
#media
z.B.: #media {width: 100%;} - (Aufruf mit id="media")
 
tr, th, td
z.B.: tr, th, td {display: block;}
 
link
z.B.: link {font-size: 5em;}
 
#img
z.B.: #img { height: 10px;} - (Aufruf mit id="img")
 
img
z.B.: img { height: 100%;}
 
#table
z.B.: #table {width:100%; float: left; border-width: 2px;} - (Aufruf mit id="table")
 
h1
z.B.: h1 {font-size: 0.6em;}
 
p4
z.B.: p4 {font-size: 1em;}
 
#p
z.B.: #p {font-size:1.5em; text-align: left;} - (Aufruf mit id="p")
 
#header  
z.B.: #header {width: 100%;} - (Aufruf mit id="header")
 
div
z.B.: div {left: 50em; top: 20em;}
 
#style
z.B.: #style {left: 30%;} - (Aufruf mit id="style")
 
table
z.B.: table {width: 95%;}
 
tr, td
z.B.: tr, td {display: block;}
#table
z.B.: #table {display: block;}  - (Aufruf mit id="table")
 
body
z.B.: body {width:700px;font-size:2em;}
 


Quellcode im Body (Beispiel)

<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>

<tableid="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/>











Kontakt    Datenschutz    Impressum