Dynamic (linearly) property value by the viewport width

// Defines a property value to change linearly // from @px1_in at viewport @vp1_in // to @px2_in at viewport @vp2_in. // All values are in px. // // E.g.: #m5 {.responsive_px(padding-bottom, 66, 365, 24, 767);} // // @px1_in - value (in px) at viewport @vp1_in (in px). // @px2_in - value (in px) at viewport @vp2_in (in px). .responsive_px(@property, @px1_in, @vp1_in, @px2_in, @vp2_in) { // Remove the units, so they do not interfere with the calculations or the desired result. @px1: unit(@px1_in); @px2: unit(@px2_in); @vp1: unit(@vp1_in); @vp2: unit(@vp2_in); @k: (@px2 - @px1) / (@vp2 - @vp1); @kperc: round(@k * 100, 1); @b: round(@px1 - @k * @vp1); @{property}: calc(~'@{b}px + @{kperc}vw'); }
For all the pixel-perfectionists – a mixin that allows to specify a responsive CSS property value. Inspired by Raivo's "calc" tool.

For example, in case of
#m5 {.responsive_px(padding-bottom, 66, 365, 24, 767)}

#m5 will have padding-bottom 66px in a 365px viewport.
While extending the viewport, the padding will decrease until it is exactly 24px in a 767px viewport.

The resulting CSS in the example is
#m5 {padding-bottom: calc(104px - 10.4vw)}

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.