В настоящее время я пытаюсь создать макет, который будет совместим для нескольких размеров экрана. Ниже представлены размеры экранов, которые я проектирую:
Размеры экрана:
- 640х480
- 800х600
- 1024x768
- 1280x1024 (и более)
У меня возникают проблемы с созданием медиа-запросов 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">