diedVIPs

html knowhow

Optimierung für kleine Bildschirme









Optimierung für Bildschirme

Mit dem Befehl  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1" />   legen Sie die grundsätzliche Größen für kleine Bildschirme fest. Wenn Sie das aber individuell gestalten wollen, müssen Sie CSS-Befehle benutzen

So sieht´s aus für große Bildschirme


So sieht´s aus für mittlere Bildschirme


So sieht´s aus für kleine Bildschirme

Quellcode
<html>
<head>
<style type="text/css">

@media screen and (max-width: 42em) {
table {width:100%;padding-left:0px;padding-right:0px;}
#h1 {font-size: 1.5em;}
#img1 {width:10%;border-width:0px;top:1em;left:17em}
#img2 {width:100%;border-width:0px}
#p {color:black}
#fixed {position: fixed; width:80px; height:auto;top:1em;left:20em} }

@media screen and (max-width: 64em) {
table {width:100%;padding-left:0px;padding-right:0px;}
h1 {font-size: 2em;}
#img1 {width:15%;border-width:0px;top:1em;right:2em}
#img2 {width:100%;border-width:0px}
h2 {font-size: 1em;} }

.p {color:white}
a {text-decoration:none;}
#farbe {font-weight:bold;font-family: Cambria;}
div {border-radius:100px;border-width:4px;border-color:color: #054D05;}
#square2 {position:absolute;top: 1em;right: 1%;width: 10em;height: 10em;background-color: transparent;} div {padding: 0px;}
#schatten {box-shadow: -2px -2px 2px silver, 5px 5px 5px black;border-radius: 20px;}
#schatten2 {box-shadow: 10px 10px 10px silver;border-radius: 50px;}
#schatten3 {box-shadow: -2px -2px 2px orange, 5px 5px 5px red;border-radius: 20px;}
#schatten4 {border-radius: 40px;}
#schatten1 {text-shadow: 2px 2px silver;font-size: 1.1em;color:#800000;text-align:left;}
.fixed {position: fixed; width:150px; height:auto;top:1em;right:1em}
#square3 {position:absolute;top: 3.2em;left: 20%;width: auto;height: 5em;color:red;text-align:left;}
#square4 {position:absolute;top: 1.2em;left: 20%;width: auto;height: 5em;background-color: transparent;text-align:left;}
#square5 {position:absolute;top: 6.2em;left: 10%;width: auto;height: 2em;background-color: transparent;text-align:left;}
.auto-style57 {font-size: 1.2em;}
.auto-style213 {border-width: 0;text-align: center;}
.auto-style214 {border-color: #FFFFFF;border-width: 0;background-color: #FFFFFF;}
.auto-style216 {background-color: #FFFFFF;}
.auto-style217 {text-align: center;color: black;font-size: 1em;font-family: Cambria;}
.auto-style218 {text-align: right;}
.auto-style219 {border-width: 0px;}
.auto-style223 {border: 0 solid #FFFFFF;}
.auto-style225 {margin-top: 4px;margin-bottom: 4px;}
</style>
</head>
 
<body>
<div class="fixed"><a href="Mitmachen.html"><img id="fixed" src="Bilder/Mitgliedbutton.png" alt="…" class="fixed"/></a></div>
<div><img id="img1" src="Bilder/rgfaustklein.png" alt="…"/></div>
<div id="square4" ><h2 class="auto-style80">erste deutsche</h2></div/>
<div id="square3"><a name="Rentnergewerkschaft i.G."><h1 id="h1"><strong>Rentnergewerkschaft i.G.</strong></h1></a></div/>
<div id="square5"><p class="auto-style264" id="p">Beste Ansicht für Smartphones Querformat
</p> </div><br/><br/><br/>

</body
<html>








Kontakt    Datenschutz    Impressum