Responsive Web Design-Viewport

1.user-scalable: Whether the user can scale manually.

The 2.box-sizing property allows you to define certain elements in some way to fit the specified area. Specify the width and height of the box, and place the border and padding into the box.

[email protected] to set different styles for different screen sizes

4. Modify the background presentation (Background-color) If the document width is less than 300 pixels:

@media screen and (max-width:300px) {    body {         margin:0px; padding:0px; Color:rgb (170, 17, 17); " >lightblue;}    }

The 5.img,width property is set to 100%, and the image is responsive to the upper and lower bounds, and the image is larger than its original image. We can use the max-width property to solve this problem very well.

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

The 6.HTML5 <picture> element can set multiple pictures.

<picture>  <source srcset= "img_smallflower.jpg" media= "(max-width:400px)" >  <source srcset= " Img_flowers.jpg ">  </picture>

　　

　　

Responsive Web Design-Viewport