Condition overlap in media query_html/css_WEB-ITnose

Friends who have been exposed to responsive layout must be familiar with media query. Responsive layout is realized through this key attribute. In some responsive layout tutorials, similar settings are usually made as follows to achieve layout examples under different viewport width conditions:

@media screen and (max-width:600px){/* Style 1*/}

@media screen and (min-width:600px) and (max-width:960px){/* Style 2*/}

@media screen and (min-width:960px) {/* Style Three*/}

According to the explanation of these tutorials, the effect of this setting is: when the viewport width is less than or equal to 600px, style one is applied; when the viewport width is greater than or equal to 600px and less than or equal to When 960px, style two is applied; when the viewport width is greater than or equal to 960px, style three is applied. At first glance, there is no problem. Three style effects are set according to different viewport widths, but if you look closely, problems arise. When describing the viewport width above, the logical relationship "equal to" is used. If we only focus on one rule, there is nothing to say, but the two values ​​​​of 600px and 960px satisfy two rules at the same time, that is, the first rule is less than or equal to 600px, and the second rule is greater than or equal to 600px, so This creates the problem of overlapping conditions. So what happens when the width of the window is exactly at the boundary value of 600px or 960px?

We can conduct a simple experiment. The demo is very simple. The effect achieved is a

color switching within the above three pixel ranges. Focus on observing that the browser viewport width is between 600px and 960px pixels. The color of

is affected by which media query setting. The browser width is adjusted by manually stretching the form, and the onresize event of the window object is bound to output the current window width value in the console window.

Through the above experiments, it was found that when the browser width value is 600px, the effect still stays at the effect of style one. When the width is adjusted to 601px, it will become the effect of style two. That is to say, when a value serves as the upper limit of one condition and the lower limit of another condition, it does not contain an equal relationship for the lower limit condition. In the same way, for the min-width:960px of style 3, its meaning is also when it is greater than 960px, and does not include the case when it is equal to 960px.

There is another situation, for example, we want to change the layout of web page elements under different viewport widths, such as changing the horizontal arrangement to the vertical arrangement. When this kind of page is at a cut-off value of 600px or 960px, the arrangement of page elements will not comply with any of the rules set in CSS. You can try it manually yourself.