Atualmente estou tentando projetar um layout que será compatível com vários tamanhos de tela. Os tamanhos de tela para os quais estou projetando estão listados abaixo:

Tamanhos de tela:

640x480800x6001024 x 7681280x1024 (e maior)

A única coisa que estou tendo problemas é criar as consultas de mídia css3, para que meu layout seja alterado quando a largura da janela chegar a uma dessas larguras. Abaixo está um exemplo das consultas de mídia que estou usando atualmente, mas não está funcionando para mim, então estou pensando se alguém poderia me ajudar a consertá-lo.

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

Eu tentei ir com um novo conjunto de consultas de mídia, mas eles ainda não estão funcionando para mim. Alguém poderia por favor ajudar a explicar o que eu sou errado? Muitos de vocês já tentaram explicar, mas eu não entendi. As novas consultas de mídia são exibidas abaixo:

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