0 Пользователей и 1 Гость просматривают эту тему.
  • 4 Ответов
  • 1281 Просмотров
*

master-smeta

  • Захожу иногда
  • 298
  • 10 / 0
Здравствуйте. Подскажите пожалуйста такой момент: стоит ли использовать в адаптивном дизайне @import для загрузки стилей для разных экранов?
Например сейчас стили разделены стандартными "блоками" типа
Код
@media (min-width: 480px) and (max-width: 599px){
   ...
}
а сам файл template.css состоит из десятка тысяч строк и чтобы поправить какой-нибудь стиль приходится изрядно "поползать" по файлу.

Мне кажется было бы проще, если стили для каждого экрана будут находиться в отдельном файле типа '480-599.css'.
Но как лучше такие файлы подключать? Можно ли например сделать так:
Код
@media (min-width: 480px) and (max-width: 599px){
   @import url(480-599.css);
}
Будет ли это работать, или нет? Правильно ли так делать, или есть другие варианты?

Я мог бы и сам все узнать, потратив время на тесты и общение с гуглом... Но зачем изобретать велосипед, возможно кто0то его уже изобрел?
*

neogeek

  • Захожу иногда
  • 196
  • 21 / 2
Re: @import стилей для различных экранов
« Ответ #1 : 30.06.2015, 13:58:06 »
Код
@media (min-width: 480px) and (max-width: 599px){
   @import url(480-599.css);
}

Будет ли это работать, или нет? Правильно ли так делать, или есть другие варианты?
нет
можно подключать так
Код
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 600px)" href="480-599.css"/>
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: @import стилей для различных экранов
« Ответ #2 : 30.06.2015, 13:59:57 »
Код
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 600px)" href="480-599.css"/>

Тут нюанс. Если ресайзить экран, то это работать не будет.
*

master-smeta

  • Захожу иногда
  • 298
  • 10 / 0
Re: @import стилей для различных экранов
« Ответ #3 : 30.06.2015, 14:10:22 »
Код
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 600px)" href="480-599.css"/>
Спасибо, вариант интересный, но, как сказал Shustry, "при ресайзе экрана изменений не будет", придется обновлять страницу. Хотя, часто ли мы ресайзим страницы?

Ок, может кто-нибудь еще варианты предложит?
*

neogeek

  • Захожу иногда
  • 196
  • 21 / 2
Re: @import стилей для различных экранов
« Ответ #4 : 01.07.2015, 17:43:40 »
Ну обычно media queries для "адаптива" экраны девайсов делают, а не для ресайза окна браузера.
Как вариант написать скриптец на javascript(jQuery), но при отключенном js не будет работать
Код
jQuery(window).resize(function () {
тут код который исполнится при ресайзе
});
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Потерялась и не открывается папка стилей

Автор Ebelous

Ответов: 3
Просмотров: 280
Последний ответ 07.02.2024, 19:55:08
от Ebelous
Перекликивание стилей CSS

Автор Gromz

Ответов: 19
Просмотров: 1096
Последний ответ 12.08.2019, 22:05:42
от ProtectYourSite
Как изменить не меняя основных стилей?

Автор wishlight

Ответов: 2
Просмотров: 1275
Последний ответ 14.03.2018, 18:58:53
от wishlight
Как сделать переопределение стилей для syperfish menu?

Автор Panchito

Ответов: 2
Просмотров: 1125
Последний ответ 18.11.2014, 12:47:27
от effrit
Как же все таки найти этот CSS с таблицей стилей шрифта меню?

Автор Kinimania

Ответов: 20
Просмотров: 1958
Последний ответ 30.09.2014, 13:53:33
от Kinimania