浏览器卡在媒体查询上
是指在网页加载过程中，浏览器在执行媒体查询（Media Query）时出现卡顿或延迟的现象。媒体查询是一种CSS3的功能，用于根据设备的特性（如屏幕宽度、高度、分辨率等）来应用不同的样式规则，以实现响应式设计。
当浏览器在加载网页时遇到媒体查询，它会评估媒体查询的条件，并根据条件决定是否应用相应的样式规则。如果媒体查询条件复杂或包含大量样式规则，浏览器可能需要花费更多的时间来计算和应用这些规则，从而导致卡顿或延迟。
为了解决浏览器卡在媒体查询上的问题，可以考虑以下几点：
- 优化媒体查询条件：尽量简化媒体查询的条件，避免过于复杂的逻辑判断。可以通过合并相似的媒体查询条件或使用逻辑运算符来简化条件。
- 减少媒体查询的数量：尽量减少页面中媒体查询的数量，避免过多的媒体查询导致浏览器性能下降。可以通过整合相似的媒体查询条件，或者使用媒体查询的嵌套来减少数量。
- 使用合适的媒体查询断点：根据目标设备的特性选择合适的媒体查询断点。不同设备的屏幕尺寸和分辨率不同，选择合适的断点可以避免不必要的媒体查询计算和应用。
- 延迟加载媒体资源：对于一些媒体资源（如图片、视频等），可以使用延迟加载的方式，等页面加载完成后再加载这些资源，避免媒体查询过早触发导致的卡顿。
- 使用CSS预处理器：使用CSS预处理器（如Sass、Less等）可以提高开发效率，并且可以通过优化编译后的CSS代码来减少媒体查询的数量和复杂度。
腾讯云相关产品推荐：
- CDN加速：腾讯云CDN（https://cloud.tencent.com/product/cdn）可以加速静态资源的分发，提高页面加载速度，减少媒体查询的延迟。
- Web应用防火墙（WAF）：腾讯云WAF（https://cloud.tencent.com/product/waf）可以提供网站安全防护，防止恶意请求和攻击，保障网页加载的稳定性。
- 云服务器（CVM）：腾讯云云服务器（https://cloud.tencent.com/product/cvm）提供高性能的虚拟服务器，可以用于部署网站和应用程序，提供稳定的计算资源。
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。
相关·内容
3回答
浏览器卡在媒体查询上
、、、
如果您随后将窗口大小调整回全宽，则菜单文本将丢失，因为480px媒体查询在ul元素上有一个display:none，以便菜单不会在移动模式下永久显示。在纵向和横向模式之间的较小设备上也会发生这种情况，这是我真正关心的问题。
浏览 1提问于2017-08-01得票数 3
1回答
我被卡住了，试图扩展一些媒体查询。我有一个基于最大宽度的查询和一个基于最小宽度的查询，如下所示：/* styling goes here *//* styling goes here */我想扩展第一个查询，以便在任何识别自己处于纵向的设备上启用它，并同样扩展第二
浏览 1提问于2013-04-19得票数 2
回答已采纳
2回答
我在使用@ IE9桌面的媒体查询时遇到问题。我创建了一个网站，当用户缩小浏览器的大小时，整个布局会根据“屏幕”的大小而改变。整个布局会发生变化以适应屏幕大小。max-width: 767px){}
bunch of settings^当我向下调整浏览器大小时
浏览 3提问于2012-07-06得票数 2
1回答
在做html标记时，我遇到了以下问题:媒体查询是在可见的浏览器视口上触发的，而不是在浏览器窗口分辨率上触发的。Css媒体查询不包括浏览器面板和垂直滚动条。我希望内容块适合用户的第一个屏幕上(最小宽度: 1366px)媒体查询。但是浏览器认为我只有1349x656的分辨率和媒体查询触发器(最小宽度: 1280px)。那么，如果所有浏览器</
浏览 27提问于2021-01-13得票数 0
我试图通过一个Udemy视频学习反应，并被媒体查询卡住了。当我将给定的@media(最小宽度:992px){.NewBlogCard{宽度:50%；}语句添加到我的编辑器并保存它时，浏览器中没有任何更改。三张卡片仍然占据着整个屏幕，而不是屏幕的一半。
浏览 13提问于2022-06-15得票数 0
回答已采纳
我在看我使用CanIUse查找导入和媒体，但没有详细说明两者的结合。有关于的部分，但它没有提到兼容性，而同一页面上的部分似乎在讨论整个import，但我可以特别提到添加import的媒体查询支持。
上面链接的文档日期是2012年，但是对我大喊大叫上面使用的语法。它在我的Chrome中工作，我也会在其他浏览器上进行测试，但是如果有一个规范的源代码和一个支持表，那就太好了。
浏览 5提问于2017-04-04得票数 0
回答已采纳
当我在浏览器中使用响应性设计模式时，我的媒体查询适用于我指定的所有大小。当我在另一个设备上打开我的web应用程序时，这些相同的媒体查询将无法工作。当我使用响应式的网页设计时，对这两种大小的媒体查询都很好。当我调整浏览器的大小或在我的手机中打开相同的web应用程序(最大高度低于700 of )时，媒体查询仍然呈现为1382 of的屏幕宽度。同样，当我调整浏览器的大小(在我的笔记本电脑
浏览 3提问于2022-06-05得票数 0
3回答
不过，以下是我怀疑你能否澄清的两个问题：
浏览器是否处理HTML媒体链接与CSS媒体查询不同？我的意思是，我知道如果css中添加了css媒体查询，那么所有CSS文件无论如何都会下载到所有设备上，并且只有在浏览器解释编译的css时才会执行相应的媒体查询。但是，如果媒体链接是在HTML中添加的，是否意味着只有在匹配指定宽度的设备上浏览器才会下载foo.css？与C
浏览 5提问于2014-09-07得票数 14
回答已采纳
1回答
因此，我们有一个XPage应用程序，它在所有浏览器(包括内部便笺浏览器)上都能很好地工作。由于我们的目标用户都是桌面/移动用户，我们使用css媒体查询设计了一个响应性的布局，在浏览器上很好地工作，但是我们发现当它作为便笺应用程序运行时，它并不尊重媒体查询。它的工作原理就好像没有媒体查询(例如)。甚至移动特定项也显示在桌面上)。有什么建议让它起作用吗？我们已经走了很远的路，删除媒体<
浏览 3提问于2014-06-27得票数 1
回答已采纳
我想确定浏览器是否支持通过Javascript进行的特定媒体查询。window.matchMedia('(hover: hover)').matches;有人能描述使用CSS.supports和媒体查询的语法吗？还是以不同的方式通过Javascript来确定特定的媒体查询
浏览 3提问于2020-07-24得票数 3
回答已采纳
出于某种原因，我的浏览器只显示前4个选项卡。然后我发现，如果我缩小了浏览器的宽度，那么额外的选项卡(标签5、标签6等)也会变得可见。在Safari和FireFox中都是如此。
浏览 2提问于2017-07-17得票数 0
回答已采纳
我正在使用媒体查询为客户制作一个网站的移动版本。当我调整浏览器的大小时，媒体查询不会生效，但是当在每个设备上查看网站时，媒体查询会生效--我只是好奇，为什么当我调整浏览器窗口本身(即Firefox )时，媒体查询不生效。
任何意见都是非常感谢的。
浏览 1提问于2013-07-31得票数 8
回答已采纳
1回答
在包含多个媒体查询部分的虚构样式表中，浏览器将只处理相关媒体查询中的规则。@media screen and (max-width: 800px) { width: 80%;}
在最大宽度为400 of的屏幕上，我的问题是:即使对max 400 it的媒体查询是唯一相关的查询(在这个虚构的例子中)，浏览器是否会缓存max 800 it的媒体</e
浏览 3提问于2015-06-29得票数 0
回答已采纳
5回答
我写了一个CSS媒体查询，如下所示-@media screen and (max-width: 59.9375em) { display: none;}这在除Safari 10.0.4及更低版本以外的所有浏览器上都工作得很好。Safari似乎以不同的方式处理媒体查询。其他浏览器似乎将window.innerWidth作为触发媒体查询的视窗宽度，但safari似乎将document.doc
浏览 0提问于2017-05-18得票数 11
首先，我编写了一些CSS代码，并添加了媒体查询，这些查询应该在最大宽度830 on上触发。媒体查询工作正常，只在813 it上触发。没有对该元素的其他媒体查询，因此没有任何内容覆盖它，并且它的行为与预期一样，仅在17个像素之后。这发生在Chrome浏览器上的Windows 10笔记本电脑(完全更新)上。我在Firefox上进行了测试，结果是一样的:媒体查询
浏览 2提问于2021-09-04得票数 1
哪些现有的UI框架在非现代浏览器上提供了完整的响应式设计工具？
我尝试了和，但没有成功，因为它们大量使用媒体查询，而IE-7等旧浏览器不支持媒体查询
浏览 2提问于2012-09-01得票数 2
回答已采纳
2回答
从阅读文档中可以看出，Modernizr主要用于检测某些内容在浏览器中是否可用，例如边界半径、媒体查询等。它是否修复了这些内容以在较旧的浏览器上按预期呈现？我读过关于Polyfills的文档，但我不太确定如何实现它们，例如在不支持它们的浏览器上将圆角添加到div中。此外，是否可以使用现代来允许媒体查询在旧浏览器中工作，或者它只是一种检测媒体查询是否可以使用的方法。
如果它只是一个检测工具，那么为什么
浏览 0提问于2013-04-29得票数 1
回答已采纳
我已经构建了一个使用媒体查询的站点来使其响应，在我开发它的时候，我改变了浏览器的宽度以测试，媒体查询似乎与我设置的断点很好地工作。但问题是，在测试iPhone上的实际页面时，它似乎根本没有识别媒体查询，而是在浏览器中显示完整的桌面视图。
为什么会想到为什么iPhone会这么做，任何手机都会这么做？下面是我获得的试金石浏览器测试结果：
浏览 2提问于2014-07-25得票数 0
回答已采纳
我假设，就像链接标记中使用的媒体查询一样，我们在CSS文件中定义的媒体查询是根据浏览器的媒体查询规则被解析/覆盖或省略的(实际上，我知道，尽管链接标记所请求的带有不匹配媒体的CSS文件无论如何都是下载的，但它们并不是呈现阻塞浏览器)。那么，从CSSOM构建优化立场来看，是否最好将应用于所有屏幕设备的通用CSS规则与移动特定的CSS规则分开，并将移动特定规则封装在最大宽度的媒体查询<
浏览 6提问于2022-02-15得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
