Hosting Solutions
mobile_logo Table of Contents

Media Queries Responsive Website Layout Tutorial

Learn to easily create responsive website layouts using CSS media queries. Media queries allow us to target a particular media type and then apply zero or more expressions that check for the conditions of particular media features. Using this logic we can adjust all CSS for our site according to the screen size of the device that a user is viewing it with. Example 1 - Media Queries Changing Stylesheet <!DOCTYPE html> <html> <head> <link rel="stylesheet" media="screen and (min-width: 0px)" href="small.css"> <link rel="stylesheet" media="screen and (min-width: 1000px)" href="medium.css"> <link rel="stylesheet" media="screen and (min-width: 1400px)" href="large.css"> </head> <body> <div id="mydiv">example element</div> </body> </html> Example 2 - Media Queries Inline CSS <!DOCTYPE html> <html> <head> <style> @media screen and (min-width: 0px) { div#mydiv{ width:500px; margin:0px auto; height:100px; background: #D5E600; font-size:27px; } } @media screen and (min-width: 1000px) { div#mydiv{ width:900px; margin:0px auto; height:100px; background: #D5E600; font-size:27px; } } </style> </head> <body> <div id="mydiv">example element</div> </body> </html>

CSS Videos

Responsive Dynamic Layouts

Media Queries Responsive Website Layout TutorialResponsive Web Design Made Simple CSS media Rule TutorialMobile Friendly Test Responsive Website Development Case StudyViewport Percentage Units CSS HTML Layout TutorialAuto Adjusting Stretch Fit Website Layout TutorialBackground Size Scale Stretch ImageMulti Column Content Layout Grid TutorialFlexbox Flexible Box Layouts Flex WebsiteGrid Layout CSS Tutorial and Documentation Reference