How to solve the problem of css3 media not working

Solution: 1. Make sure the media writing format is "@media screen and (css style){}"; 2. Check whether the styles conflict; 3. Set the viewport attribute of the meta tag; 4. Media is followed by The content in brackets cannot contain the ending character ";". If there is any, it needs to be removed.

#The operating environment of this tutorial: Windows 7 system, css3 version, Dell G3 computer.

css3 @media does not work Summary of reasons

First confirm whether it is a problem with the css itself, rather than the media query not taking effect; for example

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

The external style introduces the src used in css, and it is a careless mistake

<link src="/css/imgpro.css" rel="stylesheet" > /*这是错误的*/
<link href="/css/imgpro.css" rel="stylesheet" >/*这是正确的*/

If it is a css problem, we can only analyze the specific problem in detail.

Please follow the following errors to troubleshoot.

The first error: the format is written incorrectly and there must be a space after it. For example, the following code;

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

The second error: style conflict; the style of the @media query code is overwritten by the subsequent css

Note: It is recommended that in the process of writing css, the css with @media query is written at the back to avoid being overwritten by the previous css

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

Note: This is a very common error. For example, the floating block element causes the parent element to have no height. At this time, adding a background color to the parent element does not take effect. It is actually caused by css. The error is 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 error: 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 write the end character ";" , and other errors.

Related recommendations: css video tutorial

The above is the detailed content of How to solve the problem of css3 media not working. For more information, please follow other related articles on the PHP Chinese website!