时间戳

首页 > 解决方案 > 媒体查询适用于

不要使用引导程序来完整视口/split.js/

javascript - 媒体查询适用于
不要使用引导程序来完整视口/split.js/

问题描述

我想在网站的几个不同区域（“列”）中显示不同的内容（表格、掩码等）。通常，左边是一个列表，中间是一个条目的详细信息，右边是注释、帮助、详细信息。（由于有超过 500 个掩码和列表（使用 datatables.js），我无法静态定义任何内容）。如有必要，仅可见 1 或 2 个区域。（也取决于视口）区域的宽度应该由用户调整（当然它们应该基于总可用空间）。因此我计划使用 split.js ( https://split.js.org/ ) 各个区域现在应该适应该区域中的可用空间（并且不再适应视口）。这意味着媒体查询实际上应该引用该区域（<div>) 并且不再到视口。但该功能不存在这种方式。

第一个想法是在 SCSS mixin 中定义相应宽度的格式并使用 Bootstrap Mixin。然后，在媒体查询中，我将为 mixins 使用宽度类作为当前宽度（然后通过 split.js 中的 JS / Hook + 事件窗口大小更改动态设置该类）。调整大小事件当然是一个缺点。我还必须手动构建很多东西。

<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 不是强制性的）

标签： javascriptcssbootstrap-4media-queriesscss-mixins

解决方案

最后如果找到解决方案：

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

它结合了：

这个问题的答案： jQuery UI Resizable alsoResize reverse

库： https ://marcj.github.io/css-element-queries/

和 jquery、引导程序和数据表。（我不使用 split.js）

您可以在每个选项卡引导程序中以任何方式使用数据表（完全负责）并在以下位置创建您自己的 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)
}

工作正常。请注意，该示例中选项卡的 deaktivition 无法正常工作（仅针对第二个选项卡进行硬编码）。

推荐阅读