标签: media-queries

我已经初始化砌体插件 - 工作正常，

比我销毁它的媒体宽度 <= 767px - 它被销毁了

但是当我回到媒体宽度 > 767px 并再次初始化砌体时，它不起作用。

为什么？

或者是否有其他解决方案可以关闭 masonry 插件，然后在某些事件中打开它？

这是我的代码：

var masonryData = {
    isInitLayout: true,
    isResizeBound: false,
    itemSelector: '.item',
    columnWidth: 300,
    gutter: 20,
    transitionDuration: '0.5s'
};

function initializeMasonry(masonryData){
    if (jQuery().masonry) {
        var masonryContainer = jQuery('.masonry').masonry(masonryData);
        jQuery(masonryContainer).imagesLoaded(function(){
            jQuery(masonryContainer).masonry(masonryData);
        });
    }
}

function destroyMasonry(){
    if (jQuery().masonry) {
        jQuery('.masonry').masonry();
        jQuery('.masonry').masonry('destroy');
    }
}

我正在使用查询插件，所以我对 js 媒体查询使用匹配/不匹配方法：

$.Site.Match.smallScreen = function() {
   ...
   destroyMasonry();
   ...
}

$.Site.Match.mediumScreen = function() {
   ...
   initializeMasonry(masonryData);
   ...
}

非常感谢您的帮助

我有一个简单的HTML如下

<div id="break" style="display:none">
 <br />
</div>

我试图在用户减小窗口大小时显示该中断。我正在使用CSS3媒体查询。我尝试如下

@media only screen and (max-height :510px){

    #break
    {
        display:inline;
    }
}

但是那个突破没有出现。我有什么想念的吗？

我需要根据某些条件调整和隐藏元素的大小，但我无法做到。

伪代码：

If height is less than or equal to 400px : hide
If height is between 401-600 : do x
If height is greater than or equal to 601px : do y

我这样做：

@media only screen and (max-height: 400px) {
    /* hide */
}
@media only screen and (min-height: 401px) and (max-height: 600px) {
    /* do X */
}
@media only screen and (max-height: 601px) {
    /* do Y */
}

...但它总是默认为最后一个条件： do Y

我对媒体查询进行了一些研究，但对获得平板电脑宽度感到非常困惑。

我发现的一些例子：

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px) 

但是，如今平板电脑的尺寸各不相同。有些平板电脑看起来很大，那么如何找到平板电脑的最大宽度？

到目前为止，我使用如下..

# Tablet
    only screen and (min-width: 768px) and (max-width: 979px)

我需要知道平板电脑的最大宽度来修复我的响应式设计。我可以为平板电脑使用 786 像素的最小宽度吗？我要所有品牌平板设备（三星、ipad、Google Nexus 系列）

我添加了一些css媒体查询,但它似乎没有任何改变,我的意思是我添加了这个代码

@media screen and (min-width:10px) and (max-width:640px) {
.leftSideBar{display:none !important;}
.rightSideBar{display:none !important;}
}

但左侧和右侧边栏仍然可见我还尝试改变最小宽度和最大宽度的范围它仍然没有任何区别,我在这里错过了什么？我是否必须在我的CSS中添加更多内容才能使其正常工作？

下面给出的是两个类的默认css

.leftSideBar{display:block !important;}
.rightSideBar{display:block !important;}

我在我的网站中使用媒体查询进行响应式布局。现在我正在尝试使用视口宽度为 320 像素的设备。下面是我的 CSS 代码：

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */

#wrapper,#white-board,#content {
width:400px;
}
#slot {
width:370px;
}

#logo {
width:100px;
}
#top-bar-content,#nav-bar-tile,#card,#fourth-box,
#eighth-box-wrapper,#eighth-box,#ninth-box-wrapper,
#ninth-box,#seventh-box-wrapper,#seventh-box,#fifth-sixth,#sixth-box,#ad_long ,#sidebar {
display:none;
}

}

这是它的外观：

这是我放大时的样子，这正是我想要的布局：

所以我一直在这件小事上浪费了大量时间。希望这里有人可以帮助我。

我有一个右侧导航面板。

.navbar_right{
 width: 365px;
 top:0;
 height:100%;
 position:fixed;
 right:0;
}

现在，当我的网站在 1400 宽度处中断时，我希望将相同的菜单放在右侧，但在底部而不是顶部。那么我该如何去删除top:0;和添加呢bottom:0;。

@media (max-width: 1400px) {
 .navbar_right{
 bottom:0;
 height:40%;
 }
}

我更希望能够使用相同的容器，因为我正在使用的平台会将内容推送到导航面板中，所以如果我能做到这一点 - 我将节省大量资源。出于同样的原因，我也更愿意避免使用 jQuery。是否可以坚持使用这个框，也许删除一个类并添加另一个类？

这是我的 CSS media query

@media screen and (max-width: 450px) {
    .box_url {
        font-size: 12pt;
    }
    .box_heading {
        font-size: 13pt;
    }
    .right {
    text-align: left;
    }
    .jane {
    font-size: 10pt;
    }
    .ninja {
    font-size: 12pt;
    }
}

和我的普通 CSS

.right {
  text-align: right;
}
.jane {
  width: 100%;
  font-size: 70pt;
}
.ninja {
  width: 100%;
    font-size: 25pt;
}

但是当我运行网站时，一些媒体查询没有被应用。

当我在 chrome 中打开开发工具时，它显示媒体查询被覆盖。

我也尝试使用，min-width但它仍然不适用这些样式。为什么会发生这种情况以及如何解决这个问题？

如何使用带高度条件。没有javascript。

@media (calc(window-width > window-height)) {
    background-color: lightblue;
}
@media (calc(window-width <= window-height)) {
    background-color: lightgray;                
}

我想为移动缺陷寻呼以检测移动设备是否旋转为纵向或横向。

我有一个页面,我想在移动设备上看起来像这样.

但是当我在移动设备上打开它时就像这样.

怎么做才能自动缩放.

注意:如果用户尝试缩小和放大,则不起作用.