Медиа-запрос применяется к <div>, а не к полному окну просмотра / split.js / может с bootstrap - PullRequest
Новая
       78

Медиа-запрос применяется к <div>, а не к полному окну просмотра / split.js / может с bootstrap

1 голос
/ 10 июля 2020

Я хочу отображать разный контент (таблицы, маски и т. Д. c.) В нескольких разных областях («столбцах») на веб-сайте. Как правило, слева находится список, в центре - детали записи, а справа - примечания, справка, детали. (Поскольку существует более 500 масок и списков (с таблицами данных. js), я не могу ничего определить статически). При необходимости видны только 1 или 2 зоны. (Также в зависимости от области просмотра) Ширина областей должна регулироваться пользователем (и, конечно, они должны основываться на общем доступном пространстве). Поэтому я планирую использовать разделение. js (https://split.js.org/) Теперь отдельные области должны адаптироваться к доступному пространству в области (а не к области просмотра). Это означает, что медиа-запрос должен фактически относиться к области (<div>), а не к области просмотра. Но функция не существует таким образом.

Первая идея - определить форматы для соответствующей ширины в миксинах S CSS и использовать Bootstrap Mixin. Затем в медиа-запросах я бы использовал класс ширины для текущей ширины (затем класс устанавливается динамически через JS / Hook from split. js + Изменение размера окна событий) для миксинов. События изменения размера, конечно же, являются недостатком. Также мне нужно собрать много вещей вручную. 

<div>
    <div class="split" id="one"></div>
    <div class="split" id="two"><</div>
</div>
------------
@mixin one_xs {@include make-col($size, $columns: $grid-columns) } /*style for small list */
@mixin one_sd {..}
@mixin one_md {..}
@mixin one_lg {..}

@mixin two_xs {..}
@mixin two_sd {..}
@mixin two_md {..}
@mixin two_lg {..}


@include media-breakpoint-up(xs) {
    @include one_xs;
    #two { display: none}
}
…

@include media-breakpoint-up(lg) {
    #one .detect_xs {@include one_xs;}
    #one .detect_sd {@include one_sd;}
    #one .detect_lg {@include one_lg;}
    #two .detect_xsmall {@include two_xs;}
    …
}

<script> 
Split(['#one', '#two']);
...
window.addEventListener('resize', function() {
…
if ( $('#one').width() ) > 1024) { 
$('#one').AddClass(".detect_md");
…
}

Это сработает (хорошо?)? Есть ли другие подходы, как это (лучше) реализовать (не нужен полный код, просто идеи). (Split. js / bootstrap не обязательны)

1 Ответ

0 голосов
/ 11 июля 2020

Наконец, если найти решение: 

https://codepen.io/MichaelBootstrap/pen/vYLrzVE

Его сочетает:

Ответ на этот вопрос: jQuery Пользовательский интерфейс с изменяемым размером также Изменить размер в обратном порядке

Библиотека: https://marcj.github.io/css-element-queries/

и jquery, bootstrap и таблицы данных. (Я не использую разделение. js)

Вы можете использовать на каждой вкладке bootstrap таблицы данных любым способом (полностью ответственный) и создавать свои собственные правила CCS на: 

.your-tab[min-width~="400px"] h2 {
    font-size: 18px;
}

вместе с bootstrap mixin: 

.your-tab[min-width~="400px"] h2 {
    @include make-col($size, $columns: $grid-columns)
}

Работает нормально. Обратите внимание, что деактивация вкладок в этом примере не работает должным образом (жестко запрограммирована только для второй вкладки).

...