Hallo Gemeinde,
ich bin neu hier und habe ein etwas ungewöhnliches Problem.
Um das Problem näher zu erläutern habe ich das Template kopiert.
Entschuldigt bitte den komischen Titel ich weiß einfach nicht wie ich das Problem simple beschreiben soll.
Rahmenbedingungen
zusätzliche Techniken:
ich benutze für die Webseite CSS, HTML und ein bisschen PHP was momentan aber noch unwichtig ist.
Wichtig ist nur das ich mir die Herausforderung gestellt habe
Kein Javascript/jQuery zu verwenden.
Also bitte keine javascript/jQuery links.Danke.
Einschränkungen: Fotoblog für private Zwecke ohne CMS, ohne Javascript. Also bitte keine javascript/jQuery links.Danke nochmals.
Browser & Betriebssystem: Linux Mint 18 mate 64 bit // Windows 10 64 bit
Fierfox ist Standardbrowser auch mit Chrome, Safari und opera getestet
gleiches Problem.
Auf Handy mit UC Browser, Opera, Chrome, Firefox, Cheetah Mobile und Dolphin getestet. Kein Unterschied.
Editor: Bluefish Editor 2.2.7
Laptop Auflösung: 1366x768
Problembeschreibung
Fehlermeldung/-beschreibung:
Ich entwickle gerade eine private Webseite
und benutze zur Optimierung Media Queries.
bisher funktioniert das auch tadellos.
Aber beim Zoom der Webseite mit Strg + Maußrad
greifen auch die Media Queries.
Also Hochauflösende Bilder die für eine Displaygröße von 1920+
optimiert sind werden dutch den Zoom auch auf einen 1024 display angezeigt
was für die Performance nicht gerade förderlich ist.
Die unterschiedlichen Queries dienen auch dafür sich an die Firefox Sidebar Strg+B anzupassen.
Als Beispiel habe ich ein Minimalprogramm erstellt wo der Fehler genauso auftritt nur nicht mit Bildern sondern mit Farben.
Am besten kann das jemand mit der gleichen Auflösung und auch Firefox als Browser testen.
Bisherige Lösungsversuche:
SelfHTML Dokumentation und
W3C documentation
Code:
Test.HTM
<!DOCTYPE html><html lang="de">
<head>
<title>test</title>
<link rel="Stylesheet" type="text/css" href="./test.css"/>
<link rel="Stylesheet" type="text/css" href="./query.css"/>
</head>
<body>
<div id="website">
<div id="test">
<p>Test</p>
</div>
</div>
</body>
</html>Test.CSS
body{
background-color: lightblue;
}
#website{
width: 900px;
height: 500px;
background-color: red;
}
#test{
background-color: black;
font-family: courier;
font-size: 50px;
font-weight: bold;
color: white;
}Query.CSS
@media all and (max-width: 930.46374px){
#test{
background-color: darkblue;
color: white;
}
}
@media all and (min-width: 1000px){
#test{
background-color: burlywood;
color: white;
}
}
@media all and (min-width: 1191.279069767px){
#test{
background-color: lightgray;
color: black;
}
}