CSS 媒体查询在 Microsoft Edge 上不起作用

Question

 @media (min-width: 992px) and (max-width: 1140px) 
{
  .mr-1024-none
  {
        margin-right: 0px !important;
  }

  .mt-1024
  {
        margin-top: 1rem !important;
  }  

   .d-1024-none 
   {
        display: none !important;   
   }

}

I have used the above code for solving issue on ie and edge. The above media query works fine on ie but doesnot work on edge. After searching enough i found that edge does not support media query. Can someone help me out!!!

Answer 1

As you're using bootstrap, are you sure you're calling your custom stylesheet after Bootstrap call ? If not, bootstrap rules will take over your custom stylesheet.

Answer 2

I had quite same problem. If under your min-width the style is the same as between min-width and max-width, remove min-width and it will work. And yes, you have be sure you're calling your custom stylesheet after Bootstrap.

@media screen and (max-width: 1140px) {...}