CSS媒体查询不适用 [英] CSS media query not applying

问题描述

  @我的主css样式表中使用了这个媒体查询，它似乎没有工作。仅媒体屏幕和（最大设备宽度：768px）{
 .small {display：block; } 
 .big {display：none！important;} 
} 
  

网络检查员它甚至不会显示作为一个规则，但是当我在源面板查询显然是在那里。所以我不确定这个问题会是什么。我正在尝试定位宽度小于768像素的设备。

这是我如何链接到样式表，如果这很重要
< link rel =stylesheetmedia =screen type =text / csshref ={site_url} interface / style.css/>

解决方案<当你使用 max-device-width 时，它不会影响网页浏览器，你应该检查移动浏览器以查看它的工作与否。 / p>

或者，如果您想检查网页浏览器，请改为使用 max-width 。

请参阅 工作演示

CSS

  @media屏幕和（最大宽度：768px）{
 .small {display：block; } 
 .big {display：none;} 
} 
  

I'm using this media query in my main css stylesheet and it doesn't seem to be working.

@media only screen and (max-device-width : 768px) {
    .small { display: block; }
    .big { display: none !important;}
}

In the web inspector it doesn't even show up as a rule, however when i look in the sources panel the query is obviously there. So i'm not sure what the problem could be. I am trying to target devices with a width less than 768px.

Here's how i'm linking to the stylesheet, if that matters <link rel="stylesheet" media="screen" type="text/css" href="{site_url}interface/style.css" />

解决方案

As you are using max-device-width it won't affect in web browsers, You should check on mobile browsers to see its working or not.

Or if you want to check on web browsers, Then use just max-width instead.

See Working Demo

CSS

@media only screen and (max-width : 768px) {
    .small { display: block; }
    .big { display: none;}
}

这篇关于CSS媒体查询不适用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！