使用 jquery 的媒体查询

Question

我在分辨率不同的 3 个不同区域使用相同的视图页面（CSS）。我的问题是我只希望在某些情况下有一些媒体查询块。

喜欢：

if( a == 20)
{
@media (max-width : 900px) and (min-width :500px){
// some code 
}
}
if( a == 40)
{
@media (max-width : 900px) and (min-width :500px){
// some code 
}
}

这可能吗？

Answer 1

我认为 Crossfire 的建议可能是最好的。只需根据条件将 class 添加到您的 HTML 标签。

如果您正在寻找仅 JS 的解决方案，您可以使用 window.matchMedia

例如：

 if( a == 20)
 {
     window.matchMedia('screen and (max-width: 900px) and (min-width:500px)') 
     {
     // some code 
     }
 }
 if( a == 40)
 {
     window.matchMedia('screen and (max-width: 900px) and (min-width:500px)')
     {
     // some code 
     }
 }

这基本上是 JS 中的媒体查询，而且它的工作原理也差不多。请注意，IE9 或更低版本不支持此解决方案。

编辑：这是一个也适用于 IE9 或更低版本的解决方案。它所做的只是在 window 调整大小或加载时调用函数。然后您可以根据需要添加条件。你应该能够使用它。

  $(function() {

      window.responsive = function responsive() {
         //get the width of the window
         var width = $(window).width();

         if (width > 500 && width < 900) {
                //width is larger than 500px and smaller than 900px
                $('div').addClass('md-screen');
         }
       }

  });
  //Call the function on load and resize
  $(window).on('ready load resize orientationchange',function(){responsive();});

使用 jquery 的媒体查询

Media query using jquery

css

media

jquery

media-queries