Ich versuche derzeit, ein Layout zu entwerfen, das für mehrere Bildschirmgrößen kompatibel ist. Die Bildschirmgrößen, für die ich entwerfe, sind unten aufgeführt:

Bildschirmgrößen:

640 x 480800 x 6001024 x 7681280 x 1024 (und größer)

Ich habe Probleme mit der Erstellung der CSS3-Medienabfragen, sodass sich mein Layout ändert, wenn die Fensterbreite eine dieser Breiten erreicht. Unten finden Sie ein Beispiel für die Medienabfragen, die ich derzeit verwende, die jedoch bei mir nicht funktionieren. Ich frage mich, ob mir jemand helfen kann, das Problem zu beheben.

<link rel="stylesheet" type="text/css" media="screen and (max-width: 700px)" href="css/devices/screen/layout-modify1.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/devices/screen/layout-modify2.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 901px)" href="css/devices/screen/layout-modify3.css">

Ich habe versucht, neue Medienabfragen durchzuführen, aber sie funktionieren immer noch nicht für mich. Könnte jemand bitte helfen zu erklären, was ich falsch mache. Einige von Ihnen haben bereits versucht, es zu erklären, aber ich verstehe es nicht. Die neuen Medienabfragen werden unten angezeigt:

<link rel="stylesheet" type="text/css" media="screen and (max-width: 640px)" href="css/devices/screen/layout-modify1.css">

    <link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="css/devices/screen/layout-modify2.css">

    <link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px)" href="css/devices/screen/layout-modify3.css">

    <link rel="stylesheet" type="text/css" media="screen and (max-width: 1280px)" href="css/devices/screen/layout-modify4.css">