我们可以使用从JQuery里面提取的图像高度来查看媒体查询吗？

Is it possible to use a java script variable which has height of the image in media query ??

是否可以在媒体查询中使用具有图像高度的java脚本变量?

my javascript code is like this

我的javascript代码是这样的

$(document).on('click', '.transparent-btns_nav',function(event){

    //alert('clicked');
    var images = $('.rslides ').find('img');
images.each(function(){ // jQuery each loops over a jQuery obj

    var h = $(this).outerHeight(true);// $(this) is the current image
    var w =  $(this).outerWidth(true);
    //alert('source:'+$(this).attr('src'));
    //alert('alto: '+h);
    if( h <290)
    {  
        var m = 290-h;
        m = m/2;
        var n = 290 - w ;
        n = n/2;
        //alert('less height');
        $(this).css('margin-top', +m + "px");
       $(this).css('margin-bottom', +m + "px");

    }

});
});

and my media query code is some thing like this

我的媒体查询代码是这样的

@media only screen 
and (min-device-width : 320px) 
and (orientation : portrait) {
#bg {
 max-height:290px;
 height:290px;
 margin:auto;
 margin-top:auto;
 overflow:hidden;
}
.thumb{
margin-top:-60px;

}
}

What is happening the media query in portrait mode will add -60px top-margin . but then the java script adds some margin to top and bottom when the image height is smaller . What happening is that the margin at top is becoming too much with java script and media query both for the image which are smaller than the outer div size .

在纵向模式下媒体查询发生的事情将添加-60px的上边距。但是当图像高度较小时,java脚本会在顶部和底部添加一些边距。发生的事情是,对于小于外部div大小的图像,使用java脚本和媒体查询,顶部的边距变得太大。

Can any one tell me if I can use the h variable from java script into media Query to check if the size of the image is smaller then not add -60px top-margin .

任何人都可以告诉我是否可以使用java脚本中的h变量进入媒体查询来检查图像的大小是否小于那么不添加-60px的上边距。

Thanks in Advance

提前致谢

1 个解决方案

#1

The precise answer to your question is no, you can't use a JavaScript variable inside a media query.

您的问题的确切答案是否定的,您不能在媒体查询中使用JavaScript变量。

But there is a way to do what you want.

但是有一种方法可以做你想要的。

If the image is small, then add a CSS class to it using JS/jQuery, e.g.

如果图像很小,那么使用JS / jQuery为它添加一个CSS类,例如

$('.thumb').addClass('small');

Then in your media query:

然后在您的媒体查询中:

@media only screen and (min-device-width : 320px) and (orientation : portrait) {
  .thumb:not(.small) {
    margin-top: -60px;
  }
}

What's happening here is that the CSS margin is only added to thumbs that haven't been earmarked by JS as being small.

这里发生的事情是CSS边距仅添加到尚未被JS指定为小的拇指上。

#1