Twitter Bootstrap - 如何检测媒体查询何时开始
Twitter Bootstrap - how to detect when media queries starts
当引导响应.css媒体查询运行时，这是最快和最简单的触发方法？
开始行动 = 当您将窗口大小调整为移动宽度并且网站更改为响应式移动时
希望问题很清楚
我想出了一种使用窗口调整大小事件的方法，但依赖于 Twitter Bootstrap 的媒体查询，而无需对其断点进行硬编码：
<span id="mq-detector">
<span class="visible-xs"></span>
<span class="visible-sm"></span>
<span class="visible-md"></span>
<span class="visible-lg"></span>
</span>
#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();
其他答案的一个问题是每次调整大小都会触发更改事件。如果你的javascript正在做一些重要的事情，这可能会非常昂贵。
下面的代码仅在超过阈值时调用更新函数一次。
要进行测试，请抓住窗口大小控点，然后快速拖动调整大小以查看浏览器是否阻塞。
<script>
// Global state variable
var winSize = '';
window.onresize = function () {
var newWinSize = 'xs'; // default value, check for actual size
if ($(this).width() >= 1200) {
newWinSize = 'lg';
} else if ($(this).width() >= 992) {
newWinSize = 'md';
} else if ($(this).width() >= 768) {
newWinSize = 'sm';
}
if( newWinSize != winSize ) {
doSomethingOnSizeChange();
winSize = newWinSize;
}
};
</script>
使用 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) { ... }
这适用于我与 Bootstrap 3 结合使用：
<div id="media-width-detection-element"></div>
<style type="text/css">
#media-width-detection-element {
display: none;
width: 0px;
}
@media (min-width: 768px) {
#media-width-detection-element {
width: 768px;
}
}
@media (min-width: 992px) {
#media-width-detection-element {
width: 992px;
}
}
@media (min-width: 1200px) {
#media-width-detection-element {
width: 1200px;
}
}
</style>
<script type="text/javascript">
//<![CDATA[
function xs() {
return $("#media-width-detection-element").css("width") === "0px";
}
function sm() {
return $("#media-width-detection-element").css("width") === "768px";
}
function md() {
return $("#media-width-detection-element").css("width") === "992px";
}
function lg() {
return $("#media-width-detection-element").css("width") === "1200px";
}
//]]>
</script>
隐藏的 DIV 会根据实际使用的 CSS 最小宽度设置更改宽度。然后我的JavaScript简单地检查DIV的当前。
很好的提示，@falsarella！
对于那些喜欢这种事情的人，不会影响他们的实际标记，以下工作：
$(function(){
...
var mqClasses = ["visible-xs", "visible-sm", "visible-md", "visible-lg"];
var mq = $("<span id='mqDetector' style='visibility:hidden'></span>").appendTo($("body"));
$.each(mqClasses, function(idx, val) {
mq.append("<span class='" + val + "'></span>");
});
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.
此代码添加正文标签 LD、MD、SD 或 XD 类
$(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);
});
基于@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越大，媒体就越广泛。
更简单
$(window).on('resize', function () {
if ($('<div class="visible-lg">').css('display')=='block') {
// Do something for lg
}
// ...
});
我已经准备了一个超轻量级库来处理当窗口宽度和引导断点更改时触发的事件 - 响应式断点测试器
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
});
还包括其他功能，如当前断点检查：
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 smaller than md (xs, sm)
}
if (viewport.is('<=md')) {
// Executed on breakpoints that are smaller or equal to md (xs, sm, md)
}
if (viewport.is('>md')) {
// Executed on breakpoints that are larger than md (lg)
}
支持 Bootstrap 4 和 Foundation 配置，更多信息请访问 GitHub 存储库
这是我对 bootstrap 4 的解决方案，基于@falsarella的想法
*注意：使用下面的"整页"选项测试此代码段，否则它将根据代码段 iframe 大小返回错误的屏幕类型
/**
* @returns STRING current screen type like: xs, sm, md, lg or xl
*/
function getScreenType() {
!function initHelpers() {
if ($('div.mq-detector').length !== 0) return;
$('body').append(_mqDetector());
// helpers
function _mqDetector() {
return `
<div class="mq-detector invisible">
<div
class="d-block d-sm-none"
data-type="xs"></div>
<div
class="d-none d-sm-block d-md-none"
data-type="sm"></div>
<div
class="d-none d-md-block d-lg-none"
data-type="md"></div>
<div
class="d-none d-lg-block d-xl-none"
data-type="lg"></div>
<div
class="d-none d-xl-block"
data-type="xl"></div>
</div>
`;
}
}();
// @then
return $('div.mq-detector').children().filter(':visible').data('type');
}
console.log(getScreenType())<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 改进出色的
@falsarella答案，这里有一个适用于 Bootstrap 4 的较短版本：
.CSS：
#mq-detector {
visibility: hidden;
}
.HTML：
<div id="mq-detector">
<span data-mq="xs" class="d-block d-sm-none"></span>
<span data-mq="sm" class="d-none d-sm-block d-md-none"></span>
<span data-mq="md" class="d-none d-md-block d-lg-none"></span>
<span data-mq="lg" class="d-none d-lg-block d-xl-none"></span>
<span data-mq="xl" class="d-none d-xl-block"></span>
</div>
JAVASCRIPT ：
//Define function that returns the currently used media query
function getBsMq(){
var currMq;
var mqDetector = $('#mq-detector [data-mq]');
mqDetector.each(function(i){
if ($(this).is(':visible')) {
currMq = $(this).attr('data-mq');
}
});
return currMq;
}
//Call the function and get the currently used media query
alert(getBsMq());
您可以使用
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函数，如下所示：
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，例如不支持IE9。因此，旧版浏览器将需要 polyfill 来实现这一目标。
演示
我用它来只将导航栏粘在大屏幕上引导程序的 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("<div style='visibilty:hidden' class='viewport-check'><span class='d-block d-sm-none'>xs</span><span class='d-none d-sm-block d-md-none'>sm</span><span class='d-none d-md-block d-lg-none'>md</span><span class='d-none d-lg-block d-xl-none'>lg</span><span class='d-none d-xl-block'>xl</span></div>");
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);
我会window.matchMedia和window.addEventListener('resize')一起使用。下面的示例，特别是函数getActiveBreakpoint()会告诉你哪个断点处于活动状态，但也会告诉你哪些断点以辅助类的形式lt-(小于(和gt-(大于然后(，即 gt-xs gt-sm md lt-lg lt-xl ，请参阅 https://jsfiddle.net/Lqtmc8yo/1/
/*
// from bootstrap/scss/_variables.scss
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
*/
const breakpoints = {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
}
const orderedKeys = ['xs', 'sm', 'md', 'lg', 'xl']
const getActiveBreakpoint = () => {
let breakpoint = ''
let classList = []
orderedKeys.some((k, i) => {
const n = orderedKeys[i + 1]
let query = ''
query += `(min-width: ${breakpoints[k]}px)`
if (n) {
query += `and (max-width: ${breakpoints[n] - 1}px)`
}
if (window.matchMedia(query).matches) {
breakpoint = k
classList = [...orderedKeys.slice(0, i).map(b => `gt-${b}`), k, ...orderedKeys.slice(i + 1, orderedKeys.length).map(b => `lt-${b}`)]
return true
}
return false
})
return { breakpoint, classList, className: classList.join(' ') }
}
const calculate = () => {
const result = getActiveBreakpoint()
document.getElementById('result').innerHTML = `
breakpoint: ${result.breakpoint}
<br>
className: ${result.className}
`
}
window.addEventListener('resize', calculate)
calculate()<div id="result"></div> 当
我想在我的 Bootstrap 4 应用程序中将非引导模块的类更改为 .col-md 时，这已经在 Terryfrancis 的堆栈溢出中回答了，这在我的 Bootstrap 4 应用程序中仍然很有用。
我同时使用了加载和窗口调整大小功能：
// on load
if ($(window).width() > 575 && $(window).width() < 992) {
$('div').addClass('col-md-6').removeClass('col-md-4');
} else if ($(window).width() > 992) {
$('div').addClass('col-md-4').removeClass('col-md-6');
}
// on user resizes browser window
$( window ).resize(function() {
if ($(window).width() > 575 && $(window).width() < 992) {
$('div').addClass('col-md-6').removeClass('col-md-4');
} else if (jQuery(window).width() > 992) {
$('div').addClass('col-md-4').removeClass('col-md-6');
}
});
相关文章：
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 触发媒体查询断点时刷新页面
- 媒体查询/matchMedia上的脚本
- 使用按钮和媒体查询切换显示状态
- 加载dom后禁用媒体查询
- 将语句与jquery相结合，并使用媒体查询来实现返回页首按钮
- 媒体查询与Javascript相结合
- 访问CSS媒体查询中的屏幕宽度和高度
- 使用媒体查询和angular更改移动设备中ng href的值
- 媒体查询和调整现成的网站
- 有没有一种方法可以修改在使用javascript的媒体功能的媒体查询下创建的样式
- 如何使用EnquireJS使AngularJS范围变量依赖于媒体查询
- @媒体查询在桌面浏览器中有效，而在移动浏览器中无效
- css媒体查询请求后刷新jQuery插件
- jQuery.thoggle(）和媒体查询
- 使用媒体查询设置背景图像的不透明度
- 媒体查询:如何仅定位平板电脑
- 如何将垂直选项卡式内容面板更改为具有媒体查询和 jquery 的响应式可折叠面板
- 根据浏览器屏幕大小和媒体查询执行 php 代码
- CSS 媒体查询 - 最小设备宽度和最大设备宽度
