Output granular CSS media queries with starter variables and a Python loop

output-css-media-queries.py

# -------------------------------------------------
# -- set vars below -------------------------------

# note: "em" probably offers better control
units="px"

# provide a media query granularity (in pixels)
granularity = 25

# provide start & end viewport widths
startViewportWidth = 400 # in units specified above
endViewportWidth = 1200 # in units specified above

# provide start & end font wdth axis values
startFontWdth = 70
endFontWdth = 100

# provide start & end font wght axis values
startFontWght = 300
endFontWght = 700

# -- set vars above -------------------------------
# -------------------------------------------------

from math import floor

# this sets up default values (uses start values)
viewportWidth = startViewportWidth
currentWdth = startFontWdth
currentWght = startFontWght

# this calculates ranges
totalViewportRange = endViewportWidth - startViewportWidth
wdthRange = endFontWdth - startFontWdth
wghtRange = endFontWght - startFontWght

for i in range(0,totalViewportRange+1):
    if i % granularity == 0:
    
        viewportWidth = startViewportWidth + i
        
        t= (startViewportWidth-viewportWidth) / totalViewportRange
        
        currentWdth = round(startFontWdth - (wdthRange * t))

        currentWght = round(startFontWght - (wghtRange * t))
    
        css = "@media (max-width: "+ str(viewportWidth) + units + ") {:root {--width: " + str(currentWdth) + "; --weight: " + str(currentWght) + ";}}"

        print(css)

See the result at https://codepen.io/thundernixon/pen/zyoOYy?editors=1100

Updated to just use Sass: https://codepen.io/thundernixon/pen/GPNRqd?editors=1100

Updated to be mobile-first and to hit the actual final breakpoint, and to make it easy to use whatever unit of measurement you prefer.

You might have better results if you based media queries in ems, per @nicksherman