Responsive Web Design – How to Create Responsive Web Apps
Responsive web design (RWD) means designing web pages to display nicely on the screen sizes you intend to support (mobiles, tablets, and desktops).
Below are some features you can use to make your website naturally responsive.
Viewport Meta Tag
Use the viewport meta tag in your HTML document’s <head>
element to render the webpage at its actual non-zoomed screen resolution.
<head> <meta name="viewport" content="width=device-width, initial-scale=1" /></head>
- The
name="viewport"
attribute specifies that the meta tag is for configuring the viewport. - The
"width=device-width"
value forces browsers to load web pages using the device’s actual viewport width. This allows you to override any falsified viewport size with the device’s real width. device-width
is equivalent to100vw
or100%
of the device’s viewport width."initial-scale=1"
tells browsers not to zoom in (or out) the viewport during the webpage’s initial loading.
Dynamic Width
Use dynamic width (like max-width=900px
) to make elements flexible. Fixed dimensions, such as width=900px
, prevent elements from shrinking below the specified size.
Note that you don’t always need percentages for responsive design because:
- Most elements are naturally responsive to the viewport.
- Percentages do not help the aesthetic look of an element’s margins as you change the screen size.
Responsive Layout Tools
Use CSS Grid, Flexbox, or Multi-column to create responsive layouts.
For instance, the snippet below tells browsers to split the <article>
’s content into multiple columns of 70px
minimum widths.
article { column-width: 70px;}
<article> Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</article>
Therefore, the computer will automatically calculate the number and size of columns the <article>
’s width can fit.
Media Queries
Use media queries to style your elements based on some specified tests.
For instance, the snippet below tells the browser to change the body
element’s background color from pink
to cyan
if the viewport has a 600px
minimum width.
body { background-color: pink;}
@media (min-width: 600px) { body { background-color: cyan; }}
Below are the viewport breakpoints developers often use.
Small devices (phones)
@media (max-width: 640px) { /* ... */}
Medium devices (tablets)
@media (min-width: 768px) { /* ... */}
Large devices (laptops/desktops)
@media (min-width: 1024px) { /* ... */}
Extra Large devices (large laptops/desktops)
@media (min-width: 1280px) { /* ... */}
Responsive Images
Use the <picture>
element or the <img>
’s srcset
and sizes
attributes to recommend the appropriate images for different viewport sizes.
For instance, consider the following code:
<picture> <source srcset="mobile-size-couple.webp" media="(max-width: 600px)" /> <source srcset="regular-size-couple.webp" media="(min-width: 600px)" /> <img src="regular-size-couple.webp" alt="Couple" /></picture>
The snippet above provides metadata that hints browsers to display:
mobile-size-couple.webp
on viewports having a600px
maximum width.regular-size-couple.webp
on viewports having a600px
minimum width.
Therefore, browsers supporting the <picture>
element will choose the <source>
element that best fits the user’s viewport and display it in the <img>
’s space.
However, browsers not supporting <picture>
will fall back to the <img>
element.