CSSImplement responsive layout

What is responsive layout?

Responsive layout means that the same page has different layouts for different screen sizes.

The traditional way of development is to develop a set of PC terminal, and then develop a set of mobile terminal.

With a responsive layout, you only need to develop one.

The downside is that CSS can be heavy.

@media Media queries

@Media can be used to apply part of a stylesheet based on the results of one or more media queries.

You can use it to specify a media query and a CSS block,

The CSS block can only be used with the document if the media query matches the device that is using its content.

@mediaBasic syntax of

@mediaThe media typeand(Media features) {/** Some CSS styles */
}
Copy the code

Types of media

value instructions
all All media types
braille Braille touch device
embossed Paging braille printer
handheld Small screens and handheld devices with limited data (mobile devices should use this media type by standard, but android doesn’t care about this media at all, please use itscreenUsed in conjunction with media query statements)
print The style provided to the printer, the most commonly used media type, to print pages for proper reading
projection Projection, for the projector
screen Color screens, the most common media type, are used in conjunction with screen size expressions
speech Language recitation, for screen reading software
tty Fixed-pitch character grid
tv Smart TV equipment

Several commonly used media features

value instructions
min-width Minimum width. The style takes effect when the media type is greater than or equal to the specified width
max-width The style takes effect when the media type is less than or equal to the specified width
min-height The style takes effect when the media type is greater than or equal to the specified height
max-height Maximum height. The style takes effect when the media type is less than or equal to the specified height

More Multimedia Features

@mediaThe use of

/** For example - when the width of the media type is less than or equal to 1200px, then the style inside will take effect */
@media screen and (max-width: 1200px) {
    div {
        background: pink; }}/** or use multiple media features */ at the same time
@media screen and (max-width: 1200px) and (min-width: 992px) {... }Copy the code

You can also introduce different style files depending on the media

<link ref="stylesheet" media="screen and (min-width: 768px)" href="./media.css" />
Copy the code

Media query size

/* Large devices - over 1200px */
@media screen and (min-width: 1200px){ ... }
/* Medium device - 992px ~ 1199px */
@media screen and (min-width: 992px) and (max-width: 1199px) {... }/* Small device - 768px ~ 991px */
@media screen and (min-width: 768px) and (max-width: 991px) {... }/* Ultra small device - 480px ~ 767px */
@media screen and (min-width: 480px) and (max-width: 767px) {... }/* Super small device - below 479px */
@media screen and (max-width: 479px) {... }Copy the code