Twitter Bootstrap – 如何检测媒体查询何时开始
当bootstrap-responsive.css媒体查询付诸实施时，这是最快速，最简单的方法吗？
go in action =当您将窗口调整为移动宽度并将网站更改为响应式移动时
希望问题很清楚
使用jquery，你可以找到当前窗口的大小，然后相应地做你的东西。
$(window).resize(function() { if ($(this).width() >= 1280) { //do something } else if ($(this).width() < 1280 && $(this).width()>= 980) { //do something } ... }); CSS :: Twitter-Bootsrap-layouts
/* Large desktop */ @media (min-width: 1200px) { ... } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... } /* Landscape phones and down */ @media (max-width: 480px) { ... }
我提出了一种使用窗口resize事件的方法，但是依赖于Twitter Bootstrap的媒体查询而不用硬编码他们的断点：
#mq-detector { visibility: hidden; }
var currMqIdx = undefined; var mqDetector = $("#mq-detector"); var mqSelectors = [ mqDetector.find(".visible-xs"), mqDetector.find(".visible-sm"), mqDetector.find(".visible-md"), mqDetector.find(".visible-lg") ]; var checkForResize = function() { for (var i = 0; i <= mqSelectors.length; i++) { if (mqSelectors[i].is(":visible")) { if (currMqIdx != i) { currMqIdx = i; console.log(mqSelectors[i].attr("class")); } break; } } }; $(window).on('resize', checkForResize); checkForResize();
其他答案的一个问题是每次resize时都会触发更改事件。 如果你的javascript正在做一些重要的事情，这可能会非常昂贵。
当超过阈值时，下面的代码只会调用您的更新function一次。
要测试，请抓住窗口大小句柄，然后拖动它快速resize以查看浏览器是否窒息。
这对我来说与Bootstrap 3结合使用：
隐藏的DIV更改宽度取决于使用的实际CSS最小宽度设置。 然后我的javascript简单检查当前的DIV。
优秀提示，@ falsarella！
对于那些喜欢这种不影响其实际标记的人，下面的工作如下：
$(function(){ ... var mqClasses = ["visible-xs", "visible-sm", "visible-md", "visible-lg"]; var mq = $("").appendTo($("body")); $.each(mqClasses, function(idx, val) { mq.append(""); }); function checkMQ() { var visible = mq.find(":visible").get(0).className; return visible.slice(-2); }; function checkResize(){ switch(checkMQ){ case 'xs' : ...; break; case 'sm' : ...; break; ... } } $(window).on('resize', checkResize); checkResize(); //do it once when page loads.
基于@ falsarella的解决方案 ，js部分可以简化为：
var currMqIdx = undefined; var checkForResize = function() { currMqIdx = $('#mq-detector span').index($('#mq-detector span:visible')); }; $(window).on('resize', checkForResize); checkForResize();
currMqIdx将是一个int值，从0到3.更大的currMqIdx ，媒体越宽。
此代码添加了body标签ld ， md ， sd或xd class
$(function(){ var device_width_detect = ''; function device_detec(){ if ($(this).width() >= 1280) { device_width_detect = 'ld'; }else if ($(this).width() < 1280 && $(this).width()>= 992) { device_width_detect = 'md'; }else if ($(this).width() < 992 && $(this).width()>= 768) { device_width_detect = 'sd'; }else if ($(this).width() < 768) { device_width_detect = 'xd'; } $('body').removeClass( "ld md sd xd" ).addClass( device_width_detect ); } device_detec(); $(window).on('resize', device_detec); });
我已经预先设置了一个超轻量级的库来处理窗口宽度和Bootstrap断点发生变化时触发的事件 – responsive-breakpoint-tester
var viewport = new ResponsiveTester(); $('body').on('in.screen.xs', function(event, devices) { // Code executed when viewport is was changed to xs }); $('body').on('out.screen.xs', function(event, devices) { // Code executed when viewport is no longer xs });
其他function，如当前断点检查也包括在内：
if (viewport.is('xs')) { // Executed only on xs breakpoint } if (viewport.is('!=xs')) { // Executed on all breakpoints that are not equal xs (sm, md, lg) } if (viewport.is('md')) { // Executed on breakpoints that are larger than md (lg) }
支持Bootstrap 4和Foundation配置，有关GitHub Repository的更多信息
您可以使用matchMedia和一个包装器库enquire.js来注册媒体查询，并在匹配/不匹配时发出事件。
用法
让我们使用这些Bootstrap CSS媒体查询作为从文档中获取的示例。
/* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }
要查看何时应用这些规则，请使用enquire.js注册媒体查询并提供适当的match和unmatch matchfunction，如下所示：
let rules = [ '(max-width: 768px)', // extra small devices, default '(min-width: 768px)', // small devices '(min-width: 992px)', // medium devices '(min-width: 1200px)' // large devices ]; for (let rule of rules) { enquire.register(rule, { match: function() { console.log(rule + ' matched'); }, unmatch: function() { console.log(rule + ' unmatched'); } }); }
enquire.js使用matchMedia ， matchMedia 支持现代浏览器 ，例如没有IE9。 因此，旧版浏览器需要使用polyfill来实现这一function。
演示
更简单
$(window).on('resize', function () { if ($('').css('display')=='block') { // Do something for lg } // ... });
我用这个只在大屏幕上的bootstrap中粘贴导航栏https://ducttapedanyol.com ：
if ($(this).width() >= 979) { // Detect screen size $(document).ready(function () { var menu = $('.menu'); var origOffsetY = menu.offset().top; function scroll() { if ($(window).scrollTop() >= origOffsetY) { $('.menu').addClass('sticky'); $('.fix').addClass('fix-tall'); } else { $('.menu').removeClass('sticky'); $('.fix').removeClass('fix-tall'); } } document.onscroll = scroll; }); }
我在此链接中修改了Bootsrap 4的代码，而不是alpha或beta。 代码如下;
/* ********************************************************** Detect bootrap 4 media query type https://getbootstrap.com/docs/4.0/utilities/display/ ********************************************************** */ $("body").append(""); var Bootstrap4MediaQuery = ""; //> Checks if the span is set to display block via CSS function FnDetectMediaQuery(_QsTarget) { var _QsTarget = $(_QsTarget).css('display') == 'block'; return _QsTarget; } if(FnDetectMediaQuery('.viewport-check .d-block') == true) { Bootstrap4MediaQuery = "xs"; } else if(FnDetectMediaQuery('.viewport-check .d-sm-block') == true) { Bootstrap4MediaQuery = "sm"; } else if(FnDetectMediaQuery('.viewport-check .d-md-block') == true) { Bootstrap4MediaQuery = "md"; } else if(FnDetectMediaQuery('.viewport-check .d-lg-block') == true) { Bootstrap4MediaQuery = "lg"; } else if(FnDetectMediaQuery('.viewport-check .d-xl-block') == true) { Bootstrap4MediaQuery = "xl"; } else { Bootstrap4MediaQuery = ""; } console.log("Bootstrap4MediaQuery: " + Bootstrap4MediaQuery);