diedVIPs

html knowhow

Bildschirmgrößen anpassen mit @media









mediaIm 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. Unten sehen Sie einige Beispiele. wie das funktioniert.



Media
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