Obecnie próbuję zaprojektować układ, który będzie kompatybilny z wieloma rozmiarami ekranu. Rozmiary ekranu, dla których projektuję, są wymienione poniżej:

Rozmiary ekranu:

640x480800x6001024x7681280x1024 (i więcej)

Mam problem z tworzeniem zapytań o media css3, aby mój układ zmieniał się, gdy szerokość okna osiągnie jedną z tych szerokości. Poniżej znajduje się przykład zapytań o media, których aktualnie używam, ale nie działa dla mnie, więc zastanawiam się, czy ktoś może mi pomóc to naprawić.

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

Próbowałem przejść z nowym zestawem zapytań o media, ale nadal nie działają dla mnie. Czy ktoś mógłby mi pomóc wyjaśnić, co jest nie tak. Kilku z was już próbowało wyjaśnić, ale tego nie rozumiem. Nowe zapytania o media są wyświetlane poniżej:

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