HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML Responsive Web Design

Responsive web design is the practice of building a website suitable to work on every screen-size.

Responsive web design makes your web page look good on all devices (desktops, tablets, and phones).

Responsive web design uses only HTML and CSS.

responsive web design

It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.


Setting the viewport

Pages optimized for a variety of devices must include a meta viewport tag in the head of the document.

A meta viewport tag gives the browser instructions on how to control the page's dimensions and scaling.

Using the meta viewport value width=device-width instructs the page to match the screen's width in device-independent pixels. This allows the page to reflow content to match different screen sizes, whether rendered on a small mobile phone or a large desktop monitor.

Some browsers keep the page's width constant when rotating to landscape mode, and zoom rather than reflow to fill the screen. Adding the attribute initial-scale=1 instructs browsers to establish a 1:1 relationship between CSS pixels and device-independent pixels regardless of device orientation, and allows the page to take advantage of the full landscape width.



Responsive Images

A responsive image adjust itself to fit the size of the screen.

Use width:100% and height:auto to make an image responsive, the image will be scale up and down according to screen size:

Run code

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

Run code

You can also make responsive background images.

The following example shows how to make responsive background image:

Run code

Media Queries

It is common to use media queries in responsive web pages.

The following example shows how three various-width columns will display horizontally on large screens and stacked vertically on small screens:

Left Menu
Main Content
Right Menu
Run code

You can learn more about Media Queries in our CSS Media Queries tutorial.


Hide Elements With Media Queries

The following example shows how to hide an element when the browser's width is 600px wide or down:

I will be hidden when the browser's width is 600px wide or down:
Run Code

Responsive Text Size

You can use media queries to change the font size of an element on different screen sizes:

Example DIV
Run Code

Responsive Web Page

A responsive web page should look good on large desktop screens, tablets and small mobile phones.

You can learn more about Responsive Web Design in our CSS RWD tutorial.