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

master-smeta

  • Давно я тут
  • 274
  • 9
Здравствуйте. Подскажите пожалуйста такой момент: стоит ли использовать в адаптивном дизайне @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

  • Давно я тут
  • 203
  • 18
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
  • 6430
  • 735
  • Рисую дизайны
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"/>

Тут нюанс. Если ресайзить экран, то это работать не будет.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

master-smeta

  • Давно я тут
  • 274
  • 9
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

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

Как сделать переопределение стилей для syperfish menu?

Автор Panchito

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

Автор Kinimania

Ответов: 20
Просмотров: 1223
Последний ответ 30.09.2014, 13:53:33
от Kinimania
Настройки стилей img-intro и img-fulltext в шаблоне

Автор mr.relax

Ответов: 8
Просмотров: 1530
Последний ответ 29.10.2013, 14:56:31
от darkghost
Оптимизация сайта под малые размеры экранов

Автор CR@B

Ответов: 5
Просмотров: 1829
Последний ответ 12.12.2012, 10:10:02
от CR@B
Нарушение стилей шаблон

Автор GROT

Ответов: 5
Просмотров: 746
Последний ответ 24.11.2012, 14:12:38
от GROT