CSS Responsive
Responsive web design is about creating web pages that look good on all
Introduction to Responsive Web Design
Responsive web design is about creating web pages that look good on all devices!
A responsive web design will automatically adjust for different screen sizes and viewports.
Best Experience For All Users
Web pages can be viewed with many different devices: desktops, tablets, and mobile phones.
Your web page should look good, and be easy to use, regardless of the device.
Responsive web design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge a website, to make it look good on all devices.
Key components in responsive web design are:
- Viewport
<meta>tag
- Flexible layout (grid and flex)
- Mediaqueries
<img src="rwd_desktop.png" style="border:2px solid #dddddd;">
Desktop
<img src="rwd_tablet.png" style="border:2px solid #dddddd;">
Tablet
<img src="rwd_phone.png" style="border:2px solid #dddddd;">
Phone