Как объединить медиазапросы

[alleclf]

Для отладки использовал такую схему:

<link rel="stylesheet" media="screen and (orientation:portrait) and (max-width:240px)" href="{THEME}/css/style_p.css" /><link rel="stylesheet" media="screen and (orientation:landscape) and (max-width:480px)" href="{THEME}/css/style_l.css" />

Как правильно объединить эти два медиазапроса в один?

<link rel="stylesheet" media="screen and (((orientation:portrait) and (max-width:240px)) or ((orientation:landscape) and (max-width:480px)))" href="{THEME}/css/style_p.css" />

Так правильно? Можно ли использовать вложенные выражения?

Edited March 2, 2015 by alleclf

[Yazon_Nile]

обьединить в один файл и использовать медизапросы там.

[alleclf]

  On 3/2/2015 at 10:47 PM, Yazon_Nile said:

обьединить в один файл и использовать медизапросы там.

так весь файл будет загружаться, а так лишь маленькая часть под нужное разрешение

[Yazon_Nile]

Количество стилей в медизапросах обычно ничтожно мало, по сравнению с базовыми. Поэтому выделение их в отдельный файл не имеет смысла в современных бразуерах.

[Switch74]

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

 

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

[alleclf]

Мне надо все стили адаптивности относящиеся к мобильным устройствам вынести в отдельный файл. Тогда я смогу сделать чтобы пользователи могли при необходимости их отключать.

Например, привыкли к десктопной версии и хотят на смарте видеть тоже самое, пусть мелко зато удобно.

 

А разнесение портретной версии и ландшафтной я делал лишь для отладки, так удобнее.

Edited March 3, 2015 by alleclf

[Sergik+]

Зачем это все ? Пользуйтесь препроцессорами и будет вам сщастье, у меня например

сетка лежит в файле grid.scss а медиа-запросы в файле media.scss, все аккуратно разбито

на кучу файлов а потом собирается все в один файл. Сейчас вообще тренд минимального

количества запросов к серверу, я например вытаскивая один проект на максимальную

быстроту нафигачил инлайн js и инлайн svg.