Overlapping conditions in media Query

Friends who may have been familiar with responsive layout will not be unfamiliar with media queries. Responsive layout is implemented through this key attribute. In some responsive layout tutorials, the following similar settings are usually used to implement the layout example under different viewwidth 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 3 */}

According to the explanations in these tutorials, the effect of this setting is: Apply style 1 when the view width is less than or equal to 600px; Apply style 2 when the view width is greater than or equal to 600px and less than or equal to 960px; apply Style 3 when the width of the view is greater than or equal to 960px. Rough looks okay. Three style effects are set based on the width of different views, but the problem comes after a closer look. The logical relationship "equal to" is used to describe the width of the view. If only one rule is used, there is nothing to say, but the values 600px and 960px both satisfy the two rules at the same time, that is, the value of the first rule is smaller than or equal to 600px, the second rule must be greater than or equal to 600px, which leads to the issue of overlapping conditions. What happens when the window width is at the boundary of 600px or 960px?

We can perform a simple experiment. The demo is very simple, and the effect is a <div> color switching within the preceding three pixel ranges, focus on the media query settings that affect the color of <div> when the browser's viewers' width is 600px or 960px. Adjust the browser width by manually stretching the form. Bind The onresize event of the window object to output the current window width value in the console window.

Through the above test, it is found that when the browser width is 600px, its effect remains on the effect of style 1. When the width is adjusted to 601px, it will become the effect of style 2. That is to say, when a value is used as the upper limit of a condition and the lower limit of another condition, it does not include an equal relation for the lower limit condition. Similarly, for the Min-width: 960px Of Style 3, the meaning is greater than 960px, and does not include the case that it is equal to 960px.

Another scenario is that we want to change the layout of web page elements under different view widths, for example, to change horizontal to vertical. When the page is in the demarcation value of 600px or 960px, the arrangement of page elements does not conform to any of the rules set in CSS. You can try it manually.

 

Overlapping conditions in media Query