媒体查询不起作用
是指在前端开发中，使用CSS的媒体查询语法来根据设备的特性或者屏幕尺寸来应用不同的样式，但是在实际应用中发现媒体查询并没有生效。
媒体查询是响应式网页设计的重要组成部分，它可以根据用户设备的特性来调整网页的布局和样式，以提供更好的用户体验。媒体查询通常通过CSS的@media规则来实现，可以根据设备的宽度、高度、屏幕方向、分辨率等特性来应用不同的样式。
当媒体查询不起作用时，可能有以下几个原因：
- 错误的媒体查询语法：媒体查询语法非常严格，一个小错误就可能导致媒体查询无效。常见的错误包括拼写错误、缺少括号、逻辑运算符使用错误等。检查媒体查询语法是否正确是解决问题的第一步。
- 媒体查询被覆盖：如果在样式表中有多个媒体查询，并且它们的条件有重叠，那么后面的媒体查询可能会覆盖前面的媒体查询。这时需要检查样式表中的媒体查询顺序，并确保条件更具体的媒体查询在前面。
- 样式表加载顺序问题：如果媒体查询的样式表在其他样式表之前加载，那么媒体查询可能会失效。这是因为媒体查询是根据设备特性来判断是否应用样式，如果样式表还没有加载，设备特性无法获取。解决方法是将媒体查询的样式表放在其他样式表之后加载。
- 设备不支持媒体查询：虽然大多数现代浏览器都支持媒体查询，但是一些旧版本的浏览器可能不支持或者支持有限。在这种情况下，媒体查询可能会被忽略。可以通过检查浏览器的兼容性来确定是否支持媒体查询。
- 其他CSS规则的影响：媒体查询的样式可能会被其他CSS规则所影响，导致媒体查询不起作用。这时需要检查其他CSS规则是否与媒体查询冲突，并进行相应的调整。
对于解决媒体查询不起作用的问题，可以参考腾讯云的CSS文档，了解更多关于媒体查询的知识和技巧。腾讯云的CSS文档提供了详细的媒体查询语法说明、示例代码和常见问题解答，可以帮助开发者更好地理解和应用媒体查询。
腾讯云CSS文档链接：https://cloud.tencent.com/document/product/271/35496
相关·内容
3回答
如何在firefox中禁用媒体查询支持？
css、firefox、media-queries
我有一个移动网站，风格与广泛使用的CSS3媒体查询。
我想为不支持媒体查询的浏览器添加一个额外的css文件，该文件覆盖了一些css规则。
我想知道是否有一种在火狐(21.0)中禁用媒体查询支持的方法，以便能够进行开发，因为我没有任何其他可以测试的东西。
Chrome解决方案也能解决，尽管我更喜欢使用firebug。
浏览 3提问于2013-06-06得票数 1
回答已采纳
6回答
在媒体查询中，“屏幕”和“只屏幕”有什么区别？
css、media-queries
在媒体查询中，screen和only screen有什么区别？
<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
为什么要求我们使用only screen？screen本身是否提供了足
浏览 4提问于2011-12-18得票数 579
1回答
是否可以对@media规则执行CSS @supports检查？
css、media-queries
@support规则允许对CSS属性执行功能查询。我想知道是否有可能对具体的@媒体规则进行功能检查？
例如，我想知道浏览器是否支持@media指针或任何指针条件：
@supports @media (pointer:fine) {
或
@supports @media (pointer) {
这似乎行不通。它应该有效吗？
编辑：这不是引用问题的重复。也许我应该澄清这个问题，以解释为什么这是一个不同的问题。
我不想在媒体中嵌套“支持”，反之亦然。我希望能够检测@media查询本身是否受支持，特别是指针的@media规则。这是一个完全不同的场景，只在媒体查询中嵌套一个随机的支持查询。
浏览 2提问于2017-05-29得票数 10
回答已采纳
2回答
我的媒体查询不像预期的那样工作。
css、html、media-queries、responsive
这是我现在正在处理的一个网页的标记：
<section style="background-image: url(img/about-banner.jpg); height: 100vh; position: relative; background-size: cover;">
<div class="container" style="width: 90%;">
<div class="display-table">
<div class
浏览 1提问于2017-06-02得票数 0
回答已采纳
3回答
使用@media查询时，手机是否加载不相关的查询和图像？
css、mobile、page-load-time
如果我的CSS基于移动样式，然后对逐渐变大的显示器(平板电脑、台式机等)使用@media查询，那么移动设备会使用桌面样式吗？
我认为，通常情况下，移动设备将加载所有图像，即使它们不适用于自己的特定媒体大小。这意味着它将加载所有图像并隐藏与其基于查询的样式表不匹配的图像。
我想要做的是在这个网站的更大的版本中使用一个背景：
.splash {
background: #1a1a1a url('/assets/imageLarge.png') no-repeat;
}
另一个是手机版的：
.splash {
background: #1a1a1a url('
浏览 3提问于2013-05-21得票数 40
回答已采纳
4回答
在运行时加载css
javascript、html、css
我正在创建一个基于web的应用程序，它将在计算机和手持设备上运行。
我正在写两个css文件，一个用于pc，另一个用于手持设备。
在onload事件中，我调用了一个外部javascript，我已经编写了基于用户代理动态加载css的代码。
当我在google chrome开发人员选项上运行我的应用程序以审计页面时，它显示避免从javascript加载css。请告诉我这种方法在性能方面是否正确，或者是否有其他解决方案。
浏览 0提问于2012-11-23得票数 0
1回答
CSS媒体查询不计算为真
css、firefox、media-queries
我试图使用@import样式的媒体查询来包含特定于浏览器的CSS，如下所示：
<style type="text/css">@import url(foo.css) all and (-moz-box-sizing: content-box);</style>
然后，foo.css有：
.myStyle { -moz-box-sizing: border-box; }
我的想法是，我将包括foo.css的火狐(壁虎/Mozilla)浏览器。然而，看起来foo.css从未应用于火狐。所以：
如何在Firefox中调试?为什么@import媒体查询没有计
浏览 1提问于2013-01-12得票数 0
回答已采纳
4回答
HTML页面中CSS文件的顺序应该重要吗？
html、css、twitter-bootstrap-3、media-queries
我有一个基本的HTML页面和三个CSS文件在每个。第一个CSS文件(core.css)用于一组非常通用的所有页面共有的规则。第二个文件(additional.css)包含特定于页面项目的规则(主页、博客页面等)。第三个CSS文件(mobile.css)包含所有用于移动显示的媒体查询。我也在用靴带。
当文件按以下顺序加载时：
core.css
mobile.css
additional.css
mobile.css中包含的下列媒体查询不会被浏览器捕获。
当文件按以下顺序加载时：-- core.css - additional.css - mobile.css
mobile.c
浏览 0提问于2015-12-28得票数 3
回答已采纳
3回答
HTML链接媒体与CSS媒体查询的区别
html、css、media-queries
我知道有两种方法可以添加媒体查询：
HTML链接：
<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">
CSS:
@media all and (max-width: 1024px) {
......
}
我已经阅读了这些文档，并且理解了这两种方法之间的明显区别。不过，以下是我怀疑你能否澄清的两个问题：
浏览器是否处理HTML媒体链接与CSS媒体查询不同？我的意思是，我知道如果css中添加了cs
浏览 5提问于2014-09-07得票数 14
回答已采纳
2回答
SVG动画:使用IE10媒体查询将CSS3从其他现代浏览器中分离出来
internet-explorer、css、animation、svg、media-queries
我在SVG文件中编写了一个漂亮的加载动画。我的问题是Internet 10不支持带有参数的 <animate>标记。由于我喜欢一些挑战，我设计了一个SVG 和动画GIF版本的加载动画。
现在，我寻找某种类型的CSS3媒体查询(在下面的CSS中查找"???????????“)，它将加载支持本地SVG动画的现代Webkit和壁虎引擎(在桌面和移动设备上)的回退样式，使GIF退回到不支持CSS3媒体查询和所有Internet的老浏览器，从IE7到IE10。至少我需要Chrome，Safari & Safari手机(Webkit)，为Firefox拥有它是一个不错的选择。
浏览 2提问于2013-04-25得票数 2
1回答
媒体查询样式表
media-queries
我的网站有两个不同的样式表，一个用于台式机，另一个用于禁用所有:hover功能的手机和平板电脑。我尝试使用bootstrap媒体查询定义，但桌面将显示在一些高端手机上，我如何解决它？
这是我现在的定义：
<!-- IPHONE 4-->
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="/styles-basic.css" />
<!--
浏览 4提问于2013-06-06得票数 0
1回答
HTML5样板对于Rails应用程序的价值是什么？
ruby-on-rails、html、ruby-on-rails-3.1、html5boilerplate
有几个应用程序模板(和Rails gem)将HTML5样板添加到Rails应用程序中。因此，我调查并整理了对 的分析。似乎HTML5样板并没有在一个新的Rails应用程序中添加很多还没有的东西。什么是有用的：
示例humans.txt文件
默认应用程序布局的示例index.html文件
视口图元
谷歌分析片段
这里有一些CSS帮助，比如CSS规范化、占位符CSS媒体查询和CSS帮助类，但似乎您可以通过一个CSS工具包(如骷髅、Twitter引导带或Zurb Foundation )获得所有这些帮助。
最后，HTML5样板有许多需要支持IE6、7和8的网站组件，如IE条件注释、现代派和C
浏览 3提问于2011-10-29得票数 9
回答已采纳
我不是一个设计师，但只知道足够的调整与css。
我需要实现媒体查询现有的css设计为一个项目，以适应移动设备，如iphone，安卓等。
在现有设计中添加媒体查询支持可能需要多长时间才能了解？
请不要结束这个问题，这是我正在寻找的一个具体的答案，因为这可能会节省我在学习一些目前可能无法解决我的目的的东西上浪费时间。
浏览 0提问于2011-11-29得票数 0
回答已采纳
1回答
重写响应电子邮件模板的内联代码
html、css、email
我正在编码一个响应电子邮件模板使用媒体查询，我有一个具体的问题。
我正在使用MailChimps准则，因此我开始使用他们的，但是我发现一个问题，就是内联的css以某种方式覆盖和破坏了以前在样式上工作的CSS。
举个例子，这里是我要说的，这是我没有内联的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="htt
浏览 1提问于2016-05-13得票数 0
2回答
如何在加载移动样式表时取消初始样式表？
html、css
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" href="handheld.css" type="text/css" media='screen and (max-device-width: 480px)'/>
我的html文档的顶部有这两行。第一个是我的典型样式表，第二个样式表是当浏览器检测到移动设备时加载的移动样式表。两个样式表都加载在另一
浏览 5提问于2013-07-24得票数 0
回答已采纳
1回答
媒体查询:重写CSS规则与定义屏幕特定CSS规则
css、media-queries、cssom
我假设，就像链接标记中使用的媒体查询一样，我们在CSS文件中定义的媒体查询是根据浏览器的媒体查询规则被解析/覆盖或省略的(实际上，我知道，尽管链接标记所请求的带有不匹配媒体的CSS文件无论如何都是下载的，但它们并不是呈现阻塞浏览器)。那么，从CSSOM构建优化立场来看，是否最好将应用于所有屏幕设备的通用CSS规则与移动特定的CSS规则分开，并将移动特定规则封装在最大宽度的媒体查询中？因此，浏览器将解析更少的CSS来构建CSSOM，而不需要为平板电脑、桌面等覆盖它们。我想知道这是否会影响CSSOM性能的构建，还是它是过火了呢？
浏览 6提问于2022-02-15得票数 2
回答已采纳
1回答
媒体查询宽度100%不工作
html、css、mobile、responsive-design、media-queries
是指向我正在编写的代码的代码的链接。我正在尝试获得它，以便如果设备宽度小于540px，包装器的宽度从33.33%到100%，但它似乎没有这样做。
我的媒体查询如下：
@media only screen and (max-width: 540px) {
#wrapper {
width: 100%;
}
}
我对包装器的常规css如下所示：
#wrapper {
width: 33.3%;
margin: 0 auto;
position: relative;
}
浏览 0提问于2018-01-19得票数 2
回答已采纳
1回答
当css媒体屏幕查询启动时，是否有要捕获的浏览器事件？
javascript、jquery、css、events、media-queries
我正在制作一个js/jquery调试工具，供个人使用。我发现微调我的css媒体屏幕查询很痛苦。因此，我想出了一个主意，在窗口调整大小时显示触发的媒体css规则。因此，我需要知道，当css媒体屏幕规则生效时，是否有可能捕捉到事件。
注意:我可以轻松地读取我的css文件，并将它们放入一个变量中，过滤掉所有媒体查询，并将屏幕值与当前窗口大小进行比较。这将工作，但感觉没有效率，因为所有的css文件(和样式标签)需要处理。还有其他选择吗？
浏览 1提问于2013-10-13得票数 5
回答已采纳
1回答
打印时Google Chrome CSS样式
html、css、google-chrome
在生成打印预览和打印页面时，是否有任何方法检索Google使用的CSS样式？
这个问题的目标是删除页面左下角的页面URL，但我也会删除整个标题。
在某个地方，在一个论坛上，我发现了这个片段
@media print {
@page {
@top-left-corner {content:"";}
@top-left {content:"";}
@top-center {content:"";}
@top-right {content:"";}
@top-right-corne
浏览 21提问于2015-08-18得票数 8
1回答
在当今超高分辨率智能手机中识别目标设备，以选择要运行的css文件
html、css、responsive-design
在许多关于stackoverflow.com的问题和答案中，用户建议使用min-width和max-width来识别目标设备是智能手机还是PC (this、this、this问题等等)。如下所示： <link href="template.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)" />
<link rel="stylesheet" media="only screen
浏览 11提问于2021-07-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
