Fab four technique in CSS

Relies on the preference order of width, min-width, and max-width:

• If the width value is greater than the max-width value, max-width wins.
• If the min-width value is greater than the width or max-width values, min-width wins.

Using this, we can create a responsive CSS snippet that doesn't rely on media queries. The following snippet changes between using the min-width and max-width value depending on the width of the parent container. If it's greater than 480px, width will equal -9600px, meaning min-width takes effect. If the parent is less than 480px, width will equal 38400px, meaning max-width takes effect.

.block {
    display:inline-block;
    min-width:50%;
    max-width:100%;
    width:calc((480px — 100%) * 480);
}

A similar strategy can be used with properties such as border-radius. The following snippet will swap between a 0px and 8px radius, depending on if the card width is greater than the viewport width. The 4px in this case is just some buffer room, it's not necessary for the logic to work.

border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999)));

https://www.freecodecamp.org/news/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848/ https://ishadeed.com/article/conditional-border-radius/

[[20210830102331-flexbox-holy-albatross]]

[[css]] [[intrinsiclayout]] [[layout]] [[responsivedesign]]