媒体查询无法在Chrome中使用，但可以在Firefox中使用

Question

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.

Answer 1

It's because of the nature of CSS , it stands for C ascading S tyle S heets .

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