Форум русской поддержки Joomla!® CMS
09.12.2016, 23:26:14 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

@import стилей для различных экранов

 (Прочитано 355 раз)
0 Пользователей и 1 Гость смотрят эту тему.
master-smeta
Давно я тут
****

Репутация: +8/-0
Offline Offline

Пол: Мужской
Сообщений: 254


« : 30.06.2015, 14:52:10 »

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

Репутация: +18/-2
Offline Offline

Сообщений: 212


« Ответ #1 : 30.06.2015, 14: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
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #2 : 30.06.2015, 14:59:57 »

Код:
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 600px)" href="480-599.css"/>

Тут нюанс. Если ресайзить экран, то это работать не будет.
Записан
master-smeta
Давно я тут
****

Репутация: +8/-0
Offline Offline

Пол: Мужской
Сообщений: 254


« Ответ #3 : 30.06.2015, 15:10:22 »

Код:
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 600px)" href="480-599.css"/>
Спасибо, вариант интересный, но, как сказал Shustry, "при ресайзе экрана изменений не будет", придется обновлять страницу. Хотя, часто ли мы ресайзим страницы?

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

Репутация: +18/-2
Offline Offline

Сообщений: 212


« Ответ #4 : 01.07.2015, 18:43:40 »

Ну обычно media queries для "адаптива" экраны девайсов делают, а не для ресайза окна браузера.
Как вариант написать скриптец на javascript(jQuery), но при отключенном js не будет работать
Код:
jQuery(window).resize(function () {
тут код который исполнится при ресайзе
});
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet