@media screen and (max-width: 480px) {
								
                                 header {width: 90%;}
                                 
                                 }


							
						

							
							
								@media screen and (min-width: 480px) and (max-width: 768px}

							
						

You have three options for applying media queries to specify style rules

In the following three examples, the styles are applied if the device screen has a maximum width of 480 pixels

• Linking to an External File – Using the link element or the @import css rule
• Implementing into exsisting CSS – Apply them within the style tags or withing external style sheet.

							
								<link rel="stylesheet" media="screen and
								(max-width: 480px)” href="mobiledevice.css">


							
						

							
								@import url("mobiledevice.css") screen and
								(max-width: 480px);


							
						

							
							<style>
							@media screen and (max-width: 480px) {
								#headstruct{
									background-color: #cd0000;
								}
							}
							</style>


							
						

							
							/* smaller than 1024 pixels */
							@media screen and (max-width: 1024px) {
								#headstruct{
									background-color: #cd0000;
								}
							}
							/* smaller than 768 pixels */
							@media screen and (max-width: 768px) {
								#headstruct{
									background-color: #eeff22;
								}
							}
							/* smaller than 480 pixels */
							@media screen and (max-width: 480px) {
								#headstruct{
									background-color: #ffee00;
								}
							}


							
						

Click on the button above and copy the source code into a new document and make the following changes below:

1. Create two media queries 1) with a max-width breakpoint of 1024px and 2) another with a max-width breakpoint of 768px
2. At breakpoint of 1024px
• Remove Box 2
• Remove border from each box and give each box the property of box-shadow: 2px 2px 10px #333;
3. At break-point of 768px
• Change the height of all boxes to 375px
• Give box 1 a background-color of red, box 3 a background color of yellow, box 4 a background color of blue

							
								img{
									max-width: 100%;
									height: auto;
									}

							
						

By specifying a percentage for your images, it allows the image to fill the space according to the percentage specified.

The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.

The <picture> tag gives web developers more flexibility in specifying image resources.

The most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.

							
								<picture>
								  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg" >
								  <source media="(min-width: 465px)" srcset="img_white_flower.jpg" >
								  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;" >
								</picture>

							
						

							
								<meta name="viewport" content="width=device-width, initial-scale=1.0">

							
						

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

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.