Web Design at Georgetown CollegeBeta

Responsive Design

Getting Set Up

Already in our reset stylesheet:

Already in our HTML files:

Set font-size for html element to 100% in style.css.

Add the following to your CSS to make dealing with padding/border/etc. easier:

* {
	box-sizing: border-box;

Convert px to rem. (Target / context = result, with context being the font size of the html element, thus 24px / 16px = 1.5rem).

Using Media Queries

Media queries allow you to set specific CSS that will be used when the browser window reaches a certain size. You will most often use queries based on width (max-width or min-width).

The example below is set to process the alternative CSS when the browser shrinks to 414px.

@media screen and (max-width: 414px) {  
        /* alternate CSS here */  

This code will run in addition to all the other CSS, so it only needs to include the code that should be run instead. There is no need to specify the same stuff twice.

Here are some general viewport widths: