CSS Media Queries How Responsive Web Design Works

Responsive Web Design is an approach to website development that enables a website to be viewable on all devices without having to change content.

For those of you with a computer programming background, and for those who do not, the basic coding involved in Responsive Web Design involves CSS Media Queries.

Think of it as an if then statement. If these conditions are true then execute these commands or else do this.

CSS or cascading style sheets drive the layout and typography of todays web, and CSS table less design.

@media all and (min-width: 1001px) {
}
@media all and (max-width: 1000px) and (min-width: 700px)
{
}

The two statements above are the basic IF statements. If the width of the browser window is 1001 pixels or above then follow these commands.
The next statement executes commands if the browser with is 700-100 pixels.

The CSS statements or commands that goe in between the brackets can be as simple as a change in font size or as complicated as a total redesign of a section or module of a website.

There are many more factors that go into responsive web design coding when you add javascript programming in JQuery and PHP you can create complex decision making processes that change design typography and layout as a page is rendered.