媒体查询不适用于Chrome，适用于Firefox [英] Media Queries not working in Chrome, works in Firefox

问题描述

我有一系列针对许多不同分辨率的样式表。
我使用标题中的引用链接到它们，例如：

 < link rel =stylesheetmedia =（min-width：1024px）and（max-width：1024px）href =http://site.com/child-theme/1024.css/> 
  

在Firefox中，它们工作顺利，但在Chrome（也可能是Safari）媒体查询，尽管它明显地检测/看到它们，因为它们在Firebug中可见，但它们被划掉。

不能为了我的生活想出来......任何帮助解决这个难题都将非常感激！

我的（wordpress）网站是： HBB-Inc.com
查看它应该看，在Firefox中检查...然后在Chrome中进行比较。 这是因为 CSS 的本质，它代表 C 。

互联网上多处地方的修正报价：

Cascade是特殊部分。样式表旨在通过一系列样式规则级联
，如瀑布上的一条河。河中的
水碰到瀑布中的所有岩石，但只有底部的
水才会影响到水的流动位置。

换句话说，因为你的 media =all样式表链接在头部的下方，它们会影响到您在流程中早先设计的相同元素的外观。

我认为将样式表的媒体属性设置为全部到您的开始位置头部将解决您的问题

I have a whole range of stylesheets that are specific to many different resolutions. I link to them using references in the header, such as:

<link rel="stylesheet" media="(min-width: 1024px) and (max-width: 1024px)" href="http://site.com/child-theme/1024.css" />

In Firefox they work without a hitch, but in Chrome (and possibly Safari) it doesn't honor the media queries, even though it clearly detects/sees them as they are viewable in Firebug, however they are crossed out.

Can't for the life of me figure it out... any help solving this puzzle would be much appreciated!

My (wordpress) site is: HBB-Inc.com To view how it should look, check it out in Firefox... and then compare in Chrome.

解决方案

It's because of the nature of CSS, it stands for Cascading Style Sheets.

An amended quote on this from a number of places on the internet:

Cascade is the special part. A style sheet is intended to cascade through a series of style rules, like a river over a waterfall. The water in the river hits all the rocks in the waterfall, but only the ones at the bottom affect exactly where the water will flow. The same is true of the cascade in style sheets.

In other words, because your media="all" style sheets are linked lower down in your head section they are affecting the look of the very same elements which you have styled earlier in the process.

I think moving the style sheets with their media attribute set to all to the start of your head section will fix your problem

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