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.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

InZoi: How To Apply To School And University

4 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Where to find the Site Office Key in Atomfall

4 weeks ago By DDD

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7872

15

Java Tutorial

1649

14

CakePHP Tutorial

1408

52

Laravel Tutorial

1301

25

PHP Tutorial

1245

29

Show More