1. Flexible, grid-based layouts
2. Flexible images and media
3. Media queries

1. layout viewport is how mobile devices render full-sized, non-responsive desktop styled layouts. It might 'fake' the actual width, e.g., a mobile browser that is actually 640px wide might act as 950px wide to show more of the page. It is advisable to override this behavior using the meta tag described below.
2. visual viewport is what the user can currently see e.g., if they zoom in or out, the visual viewport is changed
3. ideal viewport is the optimal layout that should require no zooming to be usable. The particular width and height of the ideal viewport is different across mobile devices. Portrait vs. landscape orientation will also change the ideal viewport.

• add meta viewport tag to .html files to ensure your responsive designs use the ideal viewport, not the layout viewport.
• place the following in the head section, before you apply your stylesheets:

  <!-- ensure ideal device width detection... -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ...before you add your stylesheets -->
<link rel="stylesheet" href="responsive_styles.css" media="all">

New and improved webpage template

• if the line lengths become too long (unreadable) as the screen size increases
• a box is squashed and can only allow two or three words on each line as it gets narrower

target / context = result

.col {
width: 7.81%; /* 80 / 1024 = 0.078125 */
}

• multi-column layout
• flexbox
• grid

@media TYPE { CSS rules go here }

Example:

/* styles applied to screen devices */
@media screen { body { color:#fff; } }

@media TYPE and (FEATURE: VALUE) { CSS rules go here }

Examples:

/* client is 1025px wide or greater */
@media screen and (min-width: 1025px){ body {color:blue;} }

/* client is between 801px and 1024px wide */
@media screen and (min-width: 801px) and (max-width: 1024px){ body {color:red;} }

/* client is 800px wide or less */
@media screen and (max-width: 800px){ body {color:green;} }

• TYPE: Target media type, usually screen and print. If you want older browsers to avoid using your responsive styles, you use only screen
• FEATURE: There are a number of features that can be targeted, including:
  • width: width of the viewport
  • height: height of the viewport
  • min-width, max-width: minimum/maximum width of the viewport
  • min-height, max-height: minimum/maximum height of the viewport
  • device-width: width of the device
  • device-height: height of the device
  • orientation: landscape or portrait
• VALUE: the corresponding value such as size in pixels or other specifications like landscape

• when a page is initially rendered, the user agent (browser) assesses the size of the viewport and selects CSS based on any media query declarations, and continues to adjust if/as the viewport is resized
• embedded queries: media queries can be specified in the link tag itself:

  <link rel="stylesheet" href="smaller.css" media="screen and (max-width: 1025px)">
<link rel="stylesheet" href="larger.css" media="screen and (min-width: 1024px)">
<link rel="stylesheet" href="printer.css" media="print">

• external queries: defined in an external CSS file, and linked to like any other stylesheet:

  /* client is 1024px or less */
@media screen and (max-width: 1024px){
body { font-size: .8em; }
}

  /* client is wider than 1024px */
@media screen and (min-width: 1024px){
body { font-size: 2em; }
}

  /* styles for printers */
@media print {
header { display:none; }
}

• if your .css contains media queries for both screen and print, ensure the <link> tag uses media="all"

• bandwidth: image can be displayed much smaller than original size, wasting bandwidth e.g., a mobile user would need to download an image of much greater filesize than warranted for what is displayed in the window
• aspect ratio: no control over image aspect ratio - you may want different orientation (landscape, portrait, square) depending on viewport

• send lower bandwidth images for smaller clients
• reframe images suitably for different sized devices

• srcset - the path to the image
• media - a media query that determines if the image is used
• type - define the MIME type of the image; if a client does not support the type, the image will not be used

• font sizing with ems
• fluid font sizing