responsive design - CSS scale margin down to zero based on screen size

Question

I am able to scale a website's margin based on the screen's size by using vw or % units. However, I would like it to scale at a greater rate, the smaller the viewport is. So while there may be the full 10% margin when the browser window has filled a full 1920x1080 monitor, I would like the margin to be 0% when displayed on a mobile device such as an android phone.

I can accomplish an abrupt change in margin with the below css, but how could I make it a smooth downscaling of the margin?

.my-class{
    margin: 0 10%;
}

@media all and (max-width: 500px) {
    .my-class{
        margin: 0 0%;
    }
}

question from:https://stackoverflow.com/questions/65874073/css-scale-margin-down-to-zero-based-on-screen-size

Answer 1

You can use the calc() function to calculate the margin based on the view width. The function you are looking for is:

margin: 0 calc(100vw * 0.1352 - 67.6051px);

I obtained the function using the math equation to find the equation of a line given 2 points (reference). The two points are (1920, 192) (192 is 10%) and (500, 0)