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 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
Using the max-width Property
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