The concept of min/max-width media query lacks grammatical coherence

Question

The concept of min/max-width media query lacks grammatical coherence

I am struggling to grasp the concept of min-width and max-width media queries.

If I were to create a media query, I would want it to look something like this (in pseudo-code)....

if(screen.width < 420)
{
     ApplyStyle();
}

The idea of using terms like min and max in relation to width doesn't quite click for me, as setting a 'min-width' on a div element seems more like a command than a question.

Although I understand that when my screen size falls below 420px, the following occurs...

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


}

But why does CSS need to check this if I have already specified the maximum width? Shouldn't it already be known?

It's possible that I am missing some grammatical or contextual understanding here. Can someone please clarify?

css responsive-design

Answer 1

Answer №1

min-width in media queries does not correspond to the min-width property you set on elements; these are two distinct concepts.

Within media queries, min-width: X is considered true if the viewport width is greater than or equal to X, essentially functioning as screen.width >= X. Conversely, max-width would then be analogous to screen.width <= X

To me, it seems logical to interpret

@media screen and (max-width:420px)

as a screen with a maximum width of 420px, encompassing anything from 0 to 420px

Answer 2

min-width in media queries does not correspond to the min-width property you set on elements; these are two distinct concepts.

Within media queries, min-width: X is considered true if the viewport width is greater than or equal to X, essentially functioning as screen.width >= X. Conversely, max-width would then be analogous to screen.width <= X

To me, it seems logical to interpret

@media screen and (max-width:420px)

as a screen with a maximum width of 420px, encompassing anything from 0 to 420px

Answer 3

Answer №2

Here is a straightforward illustration to guide you...

Consider a scenario where a website has the following media queries:

/* #1- Large desktop */
@media (min-width: 980px) { ... }

/* #2- Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* #3- Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* #4- Landscape phones and down */
@media (max-width: 480px) { ... }

If the browser screen size is 1200px, query #1 will be met since the minimum width required is 980px for it to take effect.

Now, let's resize the browser to as small as 250px... query #4 will apply because the maximum limit is 480px.

Below are simplified explanations of the queries..

@media (min-width: 980px) { ... }

Display if the screen size is 980px or larger

@media (min-width: 768px) and (max-width: 979px) { ... }

Display if the screen size is between 768px and 978px

@media (max-width: 767px) { ... }

Display if the screen size falls within 481px to 767px range

@media (max-width: 480px) { ... }

Display if the screen size is 480px or smaller

By utilizing these queries, you can ensure that one of them is always applicable, guaranteeing a desired outcome.

Answer 4

Here is a straightforward illustration to guide you...

Consider a scenario where a website has the following media queries:

/* #1- Large desktop */
@media (min-width: 980px) { ... }

/* #2- Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* #3- Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* #4- Landscape phones and down */
@media (max-width: 480px) { ... }

If the browser screen size is 1200px, query #1 will be met since the minimum width required is 980px for it to take effect.

Now, let's resize the browser to as small as 250px... query #4 will apply because the maximum limit is 480px.

Below are simplified explanations of the queries..

@media (min-width: 980px) { ... }

Display if the screen size is 980px or larger

@media (min-width: 768px) and (max-width: 979px) { ... }

Display if the screen size is between 768px and 978px

@media (max-width: 767px) { ... }

Display if the screen size falls within 481px to 767px range

@media (max-width: 480px) { ... }

Display if the screen size is 480px or smaller

By utilizing these queries, you can ensure that one of them is always applicable, guaranteeing a desired outcome.

Answer 5

Answer №3

It can be confusing because there is a CSS property called min-width and also a media query with the same name:

@media (min-width: 420px) {...} /* The media query is predetermined based on screen size */

.element { min-width: 420px; ...} /* This sets the minimum width for the selected element */

Answer 6

It can be confusing because there is a CSS property called min-width and also a media query with the same name:

@media (min-width: 420px) {...} /* The media query is predetermined based on screen size */

.element { min-width: 420px; ...} /* This sets the minimum width for the selected element */

The concept of min/max-width media query lacks grammatical coherence

Answer №1

Answer №2

Answer №3

Similar questions

steps to overlay an image over another in bootstrap:

Enhancing the Search Form Minimum Width in Bootstrap 4 Navbar

Resizing a scrollable list using React Refs and UseLayoutEffect

Place the emoji where the cursor is located

Adaptable Collection of 4 Images

Restricting the number of lines within a paragraph in Angular 2

The lightbox is triggered by clicking on a different div to display its content

Display an image when the link is hovered over within a table

Interested in mastering BootStrap for Angularjs?

Why is my Bootstrap table failing to be responsive?

Issue encountered while trying to modify the color of a placeholder

I can't seem to figure out why this isn't functioning properly

Creating a multiline textarea with ellipsis using ReactJS

What is the reason for index.html requesting the css or js modules as if they were directories when loading?

Incorporating Image Caching Optimizations in CSS

Changing the jQuery mobile side panel from push to overlay can be achieved by modifying the display settings when transitioning from a mobile view to a

Enhancing the internal styling of ngx-charts

Where can I locate a specific child element in this scenario?

Tips for converting plain text output into HTML tags

Instructions on implementing a floating label on a select2 dropdown menu