{"id":253776,"date":"2017-04-18T07:26:05","date_gmt":"2017-04-18T14:26:05","guid":{"rendered":"http:\/\/css-tricks.com\/?p=253776"},"modified":"2017-10-20T06:36:39","modified_gmt":"2017-10-20T13:36:39","slug":"between-the-lines","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/between-the-lines\/","title":{"rendered":"Between the Lines"},"content":{"rendered":"

Media queries are great for changing values in sudden snaps at different screen sizes. But, combining the power of calc()<\/code> and viewport units like vw<\/code> and vh<\/code> , we can get an awful lot of fluidity across our layouts. For this we’ll use a technique called linear interpolation<\/em>.<\/p>\n

<\/p>\n

Linear interpolation is a formula used to find a value between two points on a line. In our case those two points are CSS values, like font-sizes<\/strong>, margins<\/strong> or widths<\/strong>, that we want to interpolate between over a set of viewport widths.<\/p>\n

The reason we might want to interpolate between<\/strong> values over a set of viewport widths is to avoid having to create multiple breakpoints to control the flow of our content when the viewport changes. Instead, we let the user’s browser calculate, according to our instructions, what values it gets. Let me explain.<\/p>\n

The following snippet is a Sass function based on linear interpolation that we, at Aranja<\/a>, have been calling between<\/strong>.<\/p>\n

\/**\r\n * Computes a CSS calc function that betweens a value from\r\n * A to B over viewport-width A to viewport-width B.\r\n * Requires a media query to cap the value at B.\r\n *\/\r\n\r\n@function between($from, $to, $fromWidth, $toWidth) {\r\n  $slope: ($to - $from) \/ ($toWidth - $fromWidth);\r\n  $base: $from - $slope * $fromWidth;\r\n\r\n  @return calc(#{$base} + #{100vw * $slope});\r\n}<\/code><\/pre>\n
The function is used like so:<\/p>\n
$small: 400px; \r\n$large: 1000px;\r\n\r\n.Container {\r\n  \/* The base (smallest) value. *\/\r\n  padding: 20px;\r\n\r\n  \/* In $small it should be 20px and in $large it should be 100px,  *\/\r\n  \/* In viewports between that its padding should be calculated *\/\r\n  @media (min-width: $small) {\r\n    padding: between(20px, 100px, $small, $large);\r\n  }\r\n\r\n\/* In $large we cap the value at 100px *\/\r\n  @media (min-width: $large) {\r\n    padding: 100px;\r\n  }\r\n}<\/code><\/pre>\n
The code example above shows how we can between<\/strong> a container’s padding from being 20px in \u201cmobile\u201d-size to being 100px in \u201cdesktop\u201d-size. Any size between that would get a calculated amount of padding ranging between 20 and 100 pixels. To prevent the padding from exceeding the maximum value we cap it with a breakpoint.<\/p>\n
Try resizing the following demo to see the example in action:<\/p>\n
See the Pen<\/a><\/p>\n
The between<\/code> function excels in solving spacing problems. Problems that previously we would have solved by hand using different media queries.<\/p>\n
Example layout<\/h3>\n
The talented Carly Sylvester<\/a> lent me the following wireframe she designed for a volunteer firefighter website so I get to demonstrate this technique on a real-world layout.<\/p>\n
\"\"<\/figure>\n
The design document consists of a desktop, tablet and mobile versions of the website, at 1440px, 720px and 324px respectively.
\nIn reality, the lines between these different devices are not so clear-cut, so we’ll use the given values as target points<\/em> and interpolate between them using our function.<\/p>\n
Notice how the layout of the desktop and tablet versions are similar except for the use of white-space and font-sizes\u2013which we’ll be able to interpolate between smoothly. When we get to our smallest target point we snap the layout into a classic full-width mobile layout.<\/p>\n
See the Pen<\/a><\/p>\n
For comparison, let’s see the implementation done the usual way, where the 3 main breakpoints are used to snap the layout their new values. <\/p>\n
See the Pen<\/a><\/p>\n
Videos of Demos<\/h3>\n
Resizing layout with<\/strong> between<\/code><\/figcaption><\/figure>\n
Resizing layout without<\/strong> between<\/code><\/figcaption><\/figure>\n
Try browsing the demos in different screen sizes and the benefits of our function should be clear. To make the “regular” version of the website better we’d need to add more<\/em> breakpoints in addition to the original three from the design document, resulting in more jumps.<\/p>\n
Combined with the power of rem<\/h3>\n
A powerful technique we can do with the function is to between<\/code> the root font-size<\/code> and base our styles on rems<\/a>:<\/p>\n
See the Pen<\/a><\/p>\n
The rem<\/code> unit refers to the root<\/em> font-size<\/code> (the font size set on the :root<\/code> or html<\/code> element) to determine its value and the root font-size<\/code> refers to the viewport width<\/strong> to determine its value. We set the root font-size<\/code> to be 10px at the smallest and 18px at the largest and the result is a smooth transition between the two. The smallest<\/em> the card in the demo ever gets is 245px, at our $small<\/em> breakpoint, and it gradually grows until it reaches its peak, 440px, at our $large<\/em> breakpoint.<\/p>\n
Closing<\/h3>\n
I am convinced that by utilizing this technique we can make the web a better experience for users browsing on devices that don\u2019t fit into the generalization of “mobile” or “tablet” sizes. For me, at least, it also makes the development process more enjoyable as there are fewer layout-related bugs on my table.<\/p>\n
Regarding browser support\u2013the fact that we only need calc()<\/code> and vw<\/code> for the technique to work puts it at around 97%<\/strong> in USA and Europe, and around 84%<\/strong> globally. <\/p>\n
In the demos above, for example, unsupported browsers (Which are mainly Opera Mini and UC Browser) will either use our lowest (base<\/em>) values or our highest (capped<\/em>) values, depending on the viewport width.<\/p>\n","protected":false},"excerpt":{"rendered":"
Media queries are great for changing values in sudden snaps at different screen sizes. But, combining the power of calc() and viewport units like vw and vh , we can get an awful lot of fluidity across our layouts. For this we’ll use a technique called linear interpolation.<\/p>\n","protected":false},"author":248461,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[1219,643],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":344273,"url":"https:\/\/css-tricks.com\/how-to-get-a-pixel-perfect-linearly-scaled-ui\/","url_meta":{"origin":253776,"position":0},"title":"How to Get a Pixel-Perfect, Linearly Scaled UI","date":"July 15, 2021","format":false,"excerpt":"Dynamically scaling CSS values based on the viewport width is hardly a new topic. You can find plenty of in-depth coverage right here on CSS-Tricks in articles like this one or this one. Most of those examples, though, use relative CSS units and unitless values to achieve fluid scaling. That\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/s_801F1F8B02DD1D1B01F3A8CD432798C49451FBC222AD086C6E92AE6397AC3E1B_1624719394166_image.png?fit=1200%2C750&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":321421,"url":"https:\/\/css-tricks.com\/linearly-scale-font-size-with-css-clamp-based-on-the-viewport\/","url_meta":{"origin":253776,"position":1},"title":"Linearly Scale font-size with CSS clamp() Based on the Viewport","date":"September 25, 2020","format":false,"excerpt":"Responsive typography has been tried in the past with a slew of methods such as media queries and CSS calc(). Here, we\u2019re going to explore a different way to linearly scale text between a set of minimum and maximum sizes as the viewport\u2019s width increases, with the intent of making\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/clamp-website.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":278271,"url":"https:\/\/css-tricks.com\/fun-tip-use-calc-to-change-the-height-of-a-hero-component\/","url_meta":{"origin":253776,"position":2},"title":"Fun Tip: Use calc() to Change the Height of a Hero Component","date":"November 6, 2018","format":false,"excerpt":"The concept of Fluid Typography was tossed around a couple of years ago. The main idea is that if you know what size your font is at two different viewport sizes, then you can have the font scaling smoothly between the two sizes. We had a jQuery solution for this\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/hero.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":293871,"url":"https:\/\/css-tricks.com\/bounce-element-around-viewport-in-css\/","url_meta":{"origin":253776,"position":3},"title":"Bounce Element Around Viewport in CSS","date":"August 19, 2019","format":false,"excerpt":"Let's say you were gonna bounce an element all around a screen, sorta like an old school screensaver or Pong or something. You'd probably be tracking the X location of the element, increasing or decreasing it in a time loop and \u2014 when the element reached the maximum or minimum\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/blobs.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":337892,"url":"https:\/\/css-tricks.com\/intrinsic-typography-is-the-future-of-styling-text-on-the-web\/","url_meta":{"origin":253776,"position":4},"title":"Intrinsic Typography is the Future of Styling Text on the Web","date":"April 20, 2021","format":false,"excerpt":"The way we style text hasn\u2019t changed much over the years. There have been numerous advancements to help make things more flexible, like layouts, but in terms of styling, most finite aspects of our designs, like text, remain relatively unchanged. This is especially true of text styling. We write code\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/type-scale.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":252583,"url":"https:\/\/css-tricks.com\/fun-viewport-units\/","url_meta":{"origin":253776,"position":5},"title":"Fun with Viewport Units","date":"June 5, 2017","format":false,"excerpt":"Viewport units have been around for several years now, with near-perfect support in the major browsers, but I keep finding new and exciting ways to use them. I thought it would be fun to review the basics, and then round-up some of my favorite use-cases. What are viewport units? Four\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/253776"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/248461"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=253776"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/253776\/revisions"}],"predecessor-version":[{"id":261575,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/253776\/revisions\/261575"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=253776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=253776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=253776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}