Responsive Layout

Question: Why might this be important?*

What is Responsive Development?

Responsive Layout: Media Queries

Mobile Device Simulator

Mobile Device Simulation Screenshot

Link: Firefox Responsive Design Mode

Link: Chrome Mobile Device Simulator

Using Media Queries

Example

This will make our .nav element position relative when the media type is print


// Default position layout

.nav {
  position: absolute;
}

// Print media only layout

@media print {
  .nav {
    position: relative;
  }
}

Media Features

Each feature is a characteristic of the user-agent

Query Description
width the width of the viewport
all TRUE if the device responds to media queries
resolution Pixel density of the output device
color Number of bits per color component of the device
pointer Is the primary input mechanism a pointing device
hover Does the primary input mechanism allow the user to hover

MDN: Documentation on Media Queries

Media Query Conditionals - AND

Only change the layout to position: relative; when


@media screen and (min-width:768px) {
  .nav {
    position: relative;
  }
}

Media Query Conditionals - OR

NOTE: OR is the , (comma) in a Media Query

Only change the layout to position: relative; when


@media screen, (min-width:768px) {
  .nav {
    position: relative;
  }
}

Mobile-First Development

 Previous Lesson Next Lesson 

Outline

[menu]

/