Actualmente estoy tratando de diseñar un diseño que sea compatible para múltiples tamaños de pantalla. Los tamaños de pantalla para los que estoy diseñando se enumeran a continuación:

Tamaños de pantalla:

640x480800x6001024x7681280x1024 (y mayores)

Lo que estoy teniendo problemas con la creación de las consultas de medios css3, de modo que mi diseño cambia cuando el ancho de la ventana alcanza uno de estos anchos. A continuación se muestra un ejemplo de las consultas de medios que estoy utilizando actualmente, pero no funciona para mí, así que me pregunto si alguien podría ayudarme a solucionarlo.

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

Intenté ir con un nuevo conjunto de consultas de medios, pero todavía no funcionan para mí. ¿Podría alguien por favor ayudar a explicar lo que estoy dong mal. Varios de ustedes ya han tratado de explicar, pero no lo entiendo. Las nuevas consultas de medios se muestran a continuación:

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