Responsive web design is the practice of building a website
suitable to work on every device and every screen size, no matter how large or
small, mobile or desktop. Responsive web design is focused around providing an
intuitive and gratifying experience for everyone. Desktop computer and cell phone
users alike all benefit from responsive websites. Responsive web design
is broken down into three main components:
1. flexible layouts
2. media queries
3. flexible media
1.
Flexible Layouts
The first part, flexible layouts, is
the practice of building the layout of a website with a flexible grid, capable
of dynamically resizing to any width. Flexible grids are built using relative
length units, most commonly percentages or em units. These relative lengths are
then used to declare common grid property values such as width, margin, or
padding.
Responsive Page layouts: Say you’re looking to provide three different responsive page layouts: one for desktops, one for tablets (or laptops), and one for smartphones. Which page dimensions should you target as your cutoffs (e.g., 480px)?
2.
Media Queries
Media queries were built as an
extension to media types commonly found when targeting and including styles.
Media queries provide the ability to specify different styles for individual
browser and device circumstances, the width of the viewport or device
orientation for example. Being able to apply uniquely targeted styles opens up
a world of opportunity and leverage to responsive web design.
Media queries allow you to customize
the presentation of your web pages for a specific range of devices like mobile
phones, tablets, desktops, etc. without any change in markups. A media query
consists of a media type and zero or more expressions that match the type and
conditions of a particular media features such as device width or screen
resolution.
Syntax
We can target different media types under a variety of
conditions. If the condition and/or media types meet, then the rules inside the
media query will be applied, otherwise, they won’t.
Breakpoints: Breakpoints are maybe the most common term you will hear and use. A breakpoint is a key to determine when to change the layout and adapt the new rules inside the media queries. Let’s go back to our example at the beginning:
Here,
the breakpoint is 480px. Now the media query knows when to set or overwrite the
new class. Basically, if the width of a device is smaller than 480px, the text
class will be applied, otherwise, it won’t.
Now
let’s see some common breakpoints for widths of devices:
· 320px — 480px:
Mobile devices
·
481px — 768px: iPads, Tablets
·
769px — 1024px: Small screens,
laptops
·
1025px — 1200px: Desktops, large
screens
·
1201px and more — Extra large
screens, TV
As I said above, these breakpoints
can differ and there is no standard exactly defined, but these are some
commonly used ones.
Using
the meta viewport value width=device-width instructs the page to
match the screen's width in device-independent pixels. A device (or density)
independent pixel being a representation of a single pixel, which may on a high
density screen consist of many physical pixels. This allows the page to reflow
content to match different screen sizes, whether rendered on a small mobile
phone or a large desktop monitor.
3.
Flexible Media
The final,
equally important aspect to responsive web design involves flexible media. As
viewports begin to change size media doesn’t always follow suit. Images,
videos, and other media types need to be scalable, changing their size as the
size of the viewport changes.
One quick way to make media scalable is by using the max-width property with a value of 100%. Doing so ensures that as the viewport gets smaller any media will scale down according to its containers width.
See the Pen Responsive Web Layout-1 by PANKAJ (@pankkap) on CodePen.