Skip to main content

Responsive Web Design with @viewport and Other New CSS Features

Andreas Bovens (Opera Software)
HTML5, CSS3, and Browser Tech, Mobile, The Leading Edge
Location: Salon 9 Level: Intermediate
Average rating: ****.
(4.25, 12 ratings)
Slides:   1-PDF 

Over the last couple of years, responsive design has taken the web development world by storm — more and more websites ship with a combo of a viewport meta tag and media queries, optimizing their layout for a wide number of screen sizes and form factors.

During that time, the viewport meta tag syntax has been expanded and reinterpreted by device manufacturers, making it somewhat quirky to work with. In addition, the non-standard device-pixel-ratio media query was introduced to deal with the advent of devices with more than 300 PPI (Retina) screens.

Recently, there has been a push to standardize the various viewport behaviors under the umbrella of the CSS Device Adaptation spec (@viewport rule), an activity Opera has been spearheading both on the spec and implementation level. The device-pixel-ratio media query on the other hand can now gradually be replaced by the resolution media query, which fulfills a similar purpose. In addition, other powerful CSS properties that allow for more versatile responsive designs are entering the stage: object-fit, object-position for managing image overflows, and the vw, vh, vmin and vmax relative length units, which can size content relative to the viewport’s dimensions.

In my talk, I will give an overview of the implementation state of these various responsive design features, and will have an in-depth look at how they can help you create flexible, versatile designs optimized for display on phones, tablets and computers.

Andreas Bovens

Opera Software

Andreas started at Opera Software’s Tokyo office as a QA engineer and web evangelist, and then led and built up Opera’s developer relations team from Oslo. Since last year, he is also product manager for Opera extensions, and he’s been busy rebuilding Opera’s extension ecosystem after its recent switch to a Chromium-based engine.