CSS3 Media Queries (Responsive Layout)

1. Media inquiries

Media features:
                width viewport (window) width
                height viewport (window) height

                min-width The minimum width of the viewport (effective when the viewport is greater than or equal to the specified width)
                max-width The maximum width of the viewport (effective when the viewport is less than or equal to the specified width)

grammar:

@media screen and (min-width: )

@media screen and (max-width: )

Media type (media type): commonly used all, screen, print.

all	all equipment
screen	The size of the screen of all electronic devices
print	printer screen

---

① min-width:1000px

When the width of the screen is greater than 1000px, the background color changes to pink

 When the width of the screen does not meet 1000px, his background color does not change to pink

---

②  @media all and (min-width:700px) and ( max-width:1000px)

All screens are greater than or equal to 700, and when less than or equal to 1000, the font color turns red

☆ Spaces are required before and after and

---

③

@media screen and (max-width:600px) {

other elements hidden

            .a{

                display: none;

            }

The previously hidden expand button is shown

            .item:last-chiled{

              display: block !important;

            }

        }