Responsive Design: reduce breakpoints

Question

I always wondered if we could reduce breakpoints in a responsive design.

Here is a simple example. I have a form containing text inputs. The normal way for responsiveness would be to have many breakpoints for example large laptop, laptop, tablet, large phone, small phone to have the nicest width for the text inputs. But would it be possible rather to have for the text inputs width something like:

If screen width > 1024 -> width: 40%
If screen width < 481 -> width: 80%
For any screen width in between, use the linear interpolation (width in between 40% to 80% depending of the screen width)

Is it possible to do so with css?

SO is a Q&A site where one asks a specific question that can return a fact-based answer. This question seems to be asking for opinion and discussion. [ask] — Rob, Dec 24 '22 at 12:56
@Rob Ok I will update my question to ask more for a specific answer to the example I asked. — Gabriel Beauchemin-Dauphinais, Dec 24 '22 at 14:18

score 1 · Answer 1 · answered Dec 24 '22 at 15:11

1

You can use media-queries to achieve these conditions. Like this:

input{
    width: 40%;
}
@media (max-width: 1024px){
    input{
        max-width: 80%;
        min-width: 40%;
    }
}
@media (max-width: 481px){
    input{
        width: 80%;
    }
}

<input type="text" placeholder="type here">

answered Dec 24 '22 at 15:11

Rocky Barua

512
1
4
17

Thank you for the answer. I did not think of using a combination of max-width and min-width, but it does not seem to do the trick. In the code snippet, I don't see any linear interpolation between the two breakpoints. – Gabriel Beauchemin-Dauphinais Dec 25 '22 at 10:49

Rene van der Lende · Accepted Answer · 2022-12-24T16:57:59.680

Convert the given percentages to actual pixel values:

80% of 480px yields 384,8 => p1( 480,385)
40% of 1024px yields 409,6 => p2(1024,410)

Both rounded up to an integer as part of a pixel counts as a full pixel (use the decimal values instead if so required).

Then with above points p1(x1,y1) and p2(x2,y2) use the point slope form of

Linear Equation y = mx + b, which is y − y1 = m(x − x1)

y = required result
m = (y2 − y1) / (x2 − x1)
x = 100vw
b = y1 − m × x1

=> substituted: y = y1 + (y2 − y1) / (x2 − x1) × (x − x1)

Final result using foremetioned points: y = 0.04595589x + 362.941177

Convert to CSS: calc(0.04595589 * 100vw + 362.941177px)

=> simplified calc(4.596vw + 362.942px) (rounded up to three decimals precision)

Reference: MathIsFun: Point-Slope Equation of a Line

Extra: Linear Equation y=mx+b can be used to calculate the value of any size property relative to the viewport size.

E.g. for my base font size I usually use CSS html { font-size: calc(0.625vmin + 0.75rem) } using points p1(320,14) and p2(1280,20). This makes 1rem vary from 14px on a 320px to 20px on a 1280px viewport minimum size.

Snippet

input[type="text"] {
    /* using y=mx+b with points p1(480,385) p2(1024,410) */
    /* y = 0.04595589x + 362.941177 */
    width: clamp(385px, 4.596vw + 362.942px, 410px); /* with clamp() */
    width: calc(4.596vw + 362.942px);                /* without...   */
}

<input type="text" placeholder="text">

<p>Check with DevTools:</p>
<p>At viewport width 480px, input width must be 385px.
<br>At viewport width 1024px, input width must be 410px.</p>
<p>(Provided browser zoom factor and font size settings are set to default.)</p>

Responsive Design: reduce breakpoints

2 Answers2