Question

有许多使用Javascript确定当前断点的示例（技巧），但我需要一种利用CSS的解决方案。

Answer 1

在没有确定当前断点的简单CSS解决方案的情况下，一种可行的方法将是创建逻辑来计算Java断点，然后使用

将代码链接到页面

    <link rel="import" href="breakpoints.html">

“ breakpoints.html”应在页面BODY标记中添加一个CSS类，以指示当前的断点。例如：

   <body class="breakpoint-md">...</body>

这样，确定当前断点的逻辑就在页面之外，并且可以在任何项目中重用，但是您只需在CSS选择器中添加一个“后缀”即可，而不必使用复杂的媒体查询。例如：

.breakpoint-md #widget {
    color: red;
}

.breakpoint-lg #widget {
    color: blue;
}

这是 breakpoint.html

的内容

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>

(function($) {

    function isBreakPoint(size) {
        var value = window.getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-' + size);
        var matched = window.matchMedia("(min-width: "+ value +")").matches;
        return matched;
    }

    $( window ).resize(function() { 
        if(isBreakPoint('xs')) {
            $(document.body).addClass('breakpoint-xs').removeClass('breakpoint-sm breakpoint-md breakpoint-lg breakpoint-xl');
        }
        if(isBreakPoint('sm')) {
            $(document.body).addClass('breakpoint-sm').removeClass('breakpoint-xs breakpoint-md breakpoint-lg breakpoint-xl');
        }
        if(isBreakPoint('md')) {
            $(document.body).addClass('breakpoint-md').removeClass('breakpoint-xs breakpoint-sm breakpoint-lg breakpoint-xl');
        }
        if(isBreakPoint('lg')) {
            $(document.body).addClass('breakpoint-lg').removeClass('breakpoint-xs breakpoint-sm breakpoint-md breakpoint-xl');
        }

        if(isBreakPoint('xl')) {
            $(document.body).addClass('breakpoint-xl').removeClass('breakpoint-xs breakpoint-sm breakpoint-md breakpoint-lg');
        }
    });

    $( window ).resize();

})(window.jQuery);
</script>

以下是BODY标签的修改方式：要将 breakpoints.html 添加到页面中，可以在HTML代码中的任意位置添加：

<link re="import" href="breakpoints.htmt"/>

Answer 2

如果这是设计布局所需的工具，那么您可以创建键控仅在特定断点处显示的标签。

<div class="d-block d-sm-none">xs</div>
<div class="d-none d-sm-block d-md-none">sm</div>
<div class="d-none d-md-block d-lg-none">md</div>
<div class="d-none d-lg-block d-xl-none">lg</div>
<div class="d-none d-xl-block">xl</div>

有没有一种方法可以在不依赖Java脚本的情况下确定Bootstrap中的当前断点？

2 个答案: