В настоящее время я пытаюсь разработать макет, который будет совместим для нескольких размеров экрана. Размеры экрана, для которого я проектирую, перечислены ниже:

Размеры экрана:

640х480800х6001024x7681280x1024 (и больше)

У меня проблемы с созданием медиазапросов css3, поэтому мой макет меняется, когда ширина окна достигает одной из этих значений. Ниже приведен пример медиазапросов, которые я сейчас использую, но они не работают для меня, поэтому мне интересно, может ли кто-нибудь помочь мне это исправить.

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

Я пытался перейти с новым набором медиа-запросов, но они все еще не работают для меня. Может кто-нибудь, пожалуйста, помогите объяснить, в чем я не прав. Некоторые из вас уже пытались объяснить, но я не понимаю. Новые медиа-запросы отображаются ниже:

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