Responsive Web Design Basics

For example, you could place all styles necessary for printing inside a print media query:

<link rel="stylesheet" href="print.css" media="print">

In addition to using the media attribute in the stylesheet link, there are two other ways to apply media queries that can be embedded in a CSS file: @media and @import . For performance reasons, either of the first two methods are recommended over the @import syntax.

@media print {
  /* print style sheets go here */
}

@import url(print.css) print;

The logic that applies to media queries is not mutually exclusive and any filter that meets that criteria the resulting CSS block will be applied using the standard rules of precedence in CSS.

Apply media queries based on viewport size

Media queries enable us to create a responsive experience, where specific styles are applied to small screens, large screens and anywhere in between. The media query syntax allows for the creation of rules that can be applied depending on device characteristics.

@media (query) {
  /* CSS Rules used when query matches */
}

While there are several different items we can query on, the ones used most often for responsive web design are min-width , max-width , min-height and max-height .

Let’s take a look an example:

• When the browser is between 0px and 640px wide, max-640px.css will be applied.
• When the browser is between 500px and 600px wide, styles within the @media will be applied.
• When the browser is 640px or wider , min-640px.css will be applied.
• When the browser width is greater than the height , landscape.css will be applied.
• When the browser height is greater than the width , portrait.css will be applied.

A note on min-device-width

It is also possible to create queries based on *-device-width ; though this practice is strongly discouraged .

The difference is subtle but very important: min-width is based on the size of the browser window, whereas min-device-width is based on the size of the screen. Unfortunately some browsers, including the legacy Android browser may not report the device width properly and instead report the screen size in device pixels instead of the expected viewport width.

In addition, using *-device-width can prevent content from adapting on desktops or other devices that allow windows to be resized because the query is based on the actual device size, not the size of the browser window.

Use relative units

A key concept behind responsive design is fluidity and proportionality as opposed to fixed width layouts. Using relative units for measurements can help simplify layouts and prevent accidentally creating components that are too big for the viewport.

For example, setting width: 100% on a top level div, ensures that it spans the width of the viewport and is never too big or too small for the viewport. The div will fit, no matter if it’s a 320px wide iPhone, 342px wide Blackberry Z10 or a 360px wide Nexus 5.

In addition, using relative units allows browsers to render the content based on the users zoom level without the need for adding horizontal scroll bars to the page.

div.fullWidth {
  width: 320px;
  margin-left: auto;
  margin-right: auto;
}

div.fullWidth {
  width: 100%;
}