Why doesn't css3 @media work? what is the reason?

The reasons why css3 media does not work: 1. The viewport attribute is not set in the HTML meta tag; 2. Style conflict, the style of the @media query code is overwritten by the subsequent css; 3. There is an error in the format writing , there must be a space after the and in the mediah statement.

The operating environment of this tutorial: windows10, css3, this article is applicable to all brands of computers.

Related recommendations: "CSS Video Tutorial"

In web page production, use @media screen to adapt the web page layout to match different access devices. Just add the @media screen attribute to CSS, write CCS styles according to the width of different devices, judge the style file according to the browser width and output different width values.

But sometimes after setting the @media media query, it is found that it does not work. What is the reason? How to deal with it? The following article will introduce it to you.

css3 Possible reasons why @media does not work

Don’t panic, analyze it slowly.

First confirm whether the problem is with the css itself, rather than the media query not taking effect. For example:

div{display:flex;}/*那么div所有的display效果都将无法生效*/

The first error: the format is written incorrectly, and must be followed by a space

For example, the following code:

@media screen and (max-width:500px){ }

Two errors: style conflict; the style of the @media query code is overwritten by the subsequent css

Note: It is recommended that during the process of writing css, the css with the @media query be written at the end to avoid this Avoid being overwritten by previous css.

The third error: There is a problem with the css itself, causing the css to not take effect

Note: This is a very common error, such as the block element floating causing the parent to The element has no height. At this time, adding a background color to the parent element did not take effect. In fact, it was an error caused by css and was not displayed.

For example, the priority of css selection will also cause one of them to take effect and the other not to take effect. There are many problems caused by css errors, so I will not list them one by one.

The fourth mistake: meta attribute viewport attribute. Although this is basic common sense, some people may miss it.

<meta name="viewport" content="width=device-width, initial-scale=1" />

The fifth error: the content in brackets cannot contain the end character ";", and other errors.

Solution:

There are many solutions, but the suggestion is to use the css exclusion method and use css to comment out part of it;

Of course, the browser is also a good way to view code and solve problems.

@media screen and (max-width:200px){
/*这只是一个示例*/
}

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of Why doesn't css3 @media work? what is the reason?. For more information, please follow other related articles on the PHP Chinese website!