The Web Standards Group recommends that campus websites do not target a specific screen resolution in their designs. Instead, campus websites should employ responsive web design (RWD) to support a range of resolutions and devices.

Within RWD, media queries, a flexible grid, and flexible media (including images and video) are combined to create website designs that transform depending on the capabilities of the user's browser, most prominently the browser's width.

Setting The Viewport

When making responsive web pages, add the following <meta> element in all your web pages:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Responsive Images

Responsive images are images that scale nicely to fit any browser size.

Using the width Property

If the CSS width property is set to 100%, the image will be responsive and scale up and down

[EXAMPLE]

Using the max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size

[EXAMPLE]

Media Queries

Since you are not targeting specific screen resolutions in your designs, there is also no specific recommended set of media query sizes or "breakpoints".

Instead, you should begin with a "mobile first" approach: start designing with the narrowest reasonable screen width (360px is the smallest width with any significant use) and then slowly increase the width of the browser, altering the design and adding breakpoints appropriately to accommodate the increasing width.

In addition to resize text and images, it is also common to use media queries in responsive web pages.

With media queries you can define completely different styles for different browser sizes.

 <style>
.left, .right {
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
</style>

 

Using W3.CSS

A great way to create a responsive design, is to use a responsive style sheet, like W3.CSS

W3C Examples