Back to Wiki

Interpolation

Responsive.js allows you to specify a set of tuple <width,value> that must be satisfied by some elements, identified by a css selectors, for all the breakpoints you need. First if you wish define a set of breakpoints (see breakpoints function details in introduction) or use a custom set later (custom function)
Select a css property (es.width,background-color,etc.):

set(property,unit)
property : css property name like border-width,height,font-size etc..
unit: optional unit information like px,%,em,rem etc.

Define the discrete function for the property :

values(/**/)
you can use this function as infinite parameters function or single array parameter. the function parameter rappresent set of values for each default breakpoints.
example : value(100,500,600,...,1900)
custom(/**/)
you can use this function as infinite parameters function or single array parameter. the function parameter is a set of tuple <breakpoint,value>
example : custom([300,300],[700,500]...,[1900,900])
as(func,delta,min,max,partial)
func : a function that takes a width and returns a value for that width.
delta: function value increase needed to render a rules.
min : min width for func (if not passed take value from settings)
max : max width for func (if not passed take value from settings)
partial : indicates if mantain values under min width and over max width

Then there is three native functions given a finite number of tuple <width,value> useful to handle most of css property types:

Function	Descriptions
linear	given a set of tuple <width,value> it builds the media query from min width and max width that rappresent the linear interpolation of values specified for each breakpoints. ( float values)
linearInt	given a set of tuple <width,value> it builds the media query from min width and max width that rappresent the linear interpolation of values specified for each breakpoints. (integer value)
interval	rappresents the function that mantain a specified value between two breakpoints as "step function".

Here you can find an example of linear interpolation and interval interpolation with the corresponding media query dynamically rendered by r$.

Examples :

linearInt

r$.breakpoints(320,767,1280);
r$.set('width','px').values(100,300,1500).linearInt().applyTo('.class');

Output

@media only screen and (max-width: 320px) {
       .class{
          width:100px !important;
       }
}
@media only screen and (min-width: 320px) and (max-width: 352px) {
       .class{
          width:100px !important;
       }
}
@media only screen and (min-width: 352px) and (max-width: 384px) {
       .class{
          width:114px !important;
       }
}
@media only screen and (min-width: 384px) and (max-width: 416px) {
       .class{
          width:129px !important;
       }
}
@media only screen and (min-width: 416px) and (max-width: 448px) {
       .class{
          width:143px !important;
       }
}
@media only screen and (min-width: 448px) and (max-width: 480px) {
       .class{
          width:157px !important;
       }
}
@media only screen and (min-width: 480px) and (max-width: 512px) {
       .class{
          width:172px !important;
       }
}
@media only screen and (min-width: 512px) and (max-width: 544px) {
       .class{
          width:186px !important;
       }
}
@media only screen and (min-width: 544px) and (max-width: 576px) {
       .class{
          width:200px !important;
       }
}
@media only screen and (min-width: 576px) and (max-width: 608px) {
       .class{
          width:215px !important;
       }
}
@media only screen and (min-width: 608px) and (max-width: 640px) {
       .class{
          width:229px !important;
       }
}
@media only screen and (min-width: 640px) and (max-width: 672px) {
       .class{
          width:243px !important;
       }
}
@media only screen and (min-width: 672px) and (max-width: 704px) {
       .class{
          width:257px !important;
       }
}
@media only screen and (min-width: 704px) and (max-width: 736px) {
       .class{
          width:272px !important;
       }
}
@media only screen and (min-width: 736px) and (max-width: 768px) {
       .class{
          width:286px !important;
       }
}
@media only screen and (min-width: 767px) and (max-width: 799px) {
       .class{
          width:300px !important;
       }
}
@media only screen and (min-width: 799px) and (max-width: 831px) {
       .class{
          width:375px !important;
       }
}
@media only screen and (min-width: 831px) and (max-width: 863px) {
       .class{
          width:450px !important;
       }
}
@media only screen and (min-width: 863px) and (max-width: 895px) {
       .class{
          width:525px !important;
       }
}
@media only screen and (min-width: 895px) and (max-width: 927px) {
       .class{
          width:599px !important;
       }
}
@media only screen and (min-width: 927px) and (max-width: 959px) {
       .class{
          width:674px !important;
       }
}
@media only screen and (min-width: 959px) and (max-width: 991px) {
       .class{
          width:749px !important;
       }
}
@media only screen and (min-width: 991px) and (max-width: 1023px) {
       .class{
          width:824px !important;
       }
}
@media only screen and (min-width: 1023px) and (max-width: 1055px) {
       .class{
          width:899px !important;
       }
}
@media only screen and (min-width: 1055px) and (max-width: 1087px) {
       .class{
          width:974px !important;
       }
}
@media only screen and (min-width: 1087px) and (max-width: 1119px) {
       .class{
          width:1049px !important;
      }
}
@media only screen and (min-width: 1119px) and (max-width: 1151px) {
       .class{
          width:1123px !important;
       }
}
@media only screen and (min-width: 1151px) and (max-width: 1183px) {
       .class{
          width:1198px !important;
       }
}
@media only screen and (min-width: 1183px) and (max-width: 1215px) {
       .class{
          width:1273px !important;
       }
}
@media only screen and (min-width: 1215px) and (max-width: 1247px) {
       .class{
          width:1348px !important;
       }
}
@media only screen and (min-width: 1247px) and (max-width: 1279px) {
       .class{
          width:1423px !important;
       }
}
@media only screen and (min-width: 1279px) and (max-width: 1311px) {
       .class{
          width:1498px !important;
       }
}
@media only screen and (min-width: 1280px) {
       .class{
          width:1500px !important;
       }
}

interval

r$.breakpoints(320,767,1280);
r$.set('width','px').values(100,300,1500).interval().applyTo('.class');

Output

@media only screen and (max-width: 320px) {
      .class{
          width:100px !important;
      }
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
      .class{
          width:100px !important;
      }
}
@media only screen and (min-width: 767px) and (max-width: 1280px) {
      .class{
          width:300px !important;
      }
}
@media only screen and (min-width: 1280px) {
      .class{
          width:1500px !important;
      }
}