Могу ли я заставить элемент html отображать определенный размер медиа?

Question

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

Я хотел бы сделать это без необходимости переопределять все медиа-запросы.

Есть ли способ рассказать об элементе, чтобы отобразить все его дочерние элементы, такие как определенный размер медиа?

Answer 1

Что бы я сделал, это добавить новое имя класса в версию шаблона, который вы хотите подчинить медиа-запросам. Затем измените свой медиа-запрос CSS только на целевые элементы с этим новым классом.

Скажем, базовый CSS (для мобильных и виджет) является:

.module-a { 
    ... 
} 
.module-a-heading { 
    ... 
} 

Затем добавьте новый Classname, скажем .module-a-fluid к экземплярам .module-a, которые вы хотите следовать вашим медиазапросы.

<div class="module-a module-a-fluid"> 
    <!-- ... --> 
</div> 

Затем измените медиазапросы только целевой .module-a S, которые также имеют .module-a-fluid.

@media (min-width: 768px) { 
    .module-a.module-a-fluid { 
     ... 
    } 
    .module-a-fluid .module-a-heading { 
     ... 
    } 
}