Use @ media to implement several key resolutions in web page self-adaptation, and @ media

Use @ media to implement several key resolutions in web page self-adaptation, and @ media

It is often difficult to adjust the layout of devices with different resolutions or window sizes. You can use @ media screen to adapt the webpage layout, but how to be compatible with all mainstream devices becomes a problem. When is the resolution set?

Method/step

1. 1

   Let's take a look at the following code, which is traversed from bootstrap. min-width is used to confirm that

   768, 992, 1200. Of course, in the past, some devices were 600-480 in width. We classified all small resolutions as smaller than 767. Why is it less than 767 instead of 768? In css, @ media (min-width: 768px) indicates that the minimum value is 768, that is,> = 768, which is equal, therefore, we can determine that the smaller devices use @ media (max-width: 767px) to indicate that <= 767 will not conflict with each other.

2. 2

   From the above we can see that there are several critical points of resolution, so we can easily write our own adaptive code.

   @ Media (min-width: 768px) {//> = 768 devices}

   @ Media (min-width: 992px) {//> = 992 devices}

   @ Media (min-width: 1200) {//> = 1200 devices}

   Pay attention to the next order. If you write @ media (min-width: 768px) below, it is a tragedy,

   @ Media (min-width: 1200) {//> = 1200 devices}

   @ Media (min-width: 992px) {//> = 992 devices}

   @ Media (min-width: 768px) {//> = 768 devices}

   Because if it is 1440, because 1440> 768, your 1200 will expire.

   So when we use min-width, the smaller value is placed above and below. Similarly, if we use max-width, the larger value is above, and the smaller value is below.

   @ Media (max-width: 1199) {// <= 1199 devices}

   @ Media (max-width: 991px) {// <= 991 devices}

   @ Media (max-width: 767px) {// <= 768 devices}

3. 3

   After getting started, we can flexibly use advanced hybrid applications.

   @ Media screen and (min-width: pixel px) {# page {width: 1100px;} # content,. div1 {width: 730px;} # secondary {width: 310px }}

   @ Media screen and (min-width: 960px) and (max-width: 1199px) {# page {width: 960px ;}# content ,. div1 {width: pixel PX;} # secondary {width: 250px} select {max-width: 200px }}

   @ Media screen and (min-width: 768px) and (max-width: 959px) {# page {width: 900px ;}# content ,. div1 {width: 620px;} # secondary {width: 220px} select {max-width: 180px }}

   @ Media only screen and (min-width: 480px) and (max-width: 767px) {# page {width: pixel PX ;}# content ,. div1 {width: 420px; position: relative ;}# secondary {display: none }# access {width: margin PX ;}# access a {padding-right: 5px} # access a img {display: none} # rss {display: none} # branding # s {display: none }}

   @ Media only screen and (max-width: 479px) {# page {width: 300px;} # content ,. div1 {width: 300px;} # secondary {display: none} # access {width: 330px;} # access a {padding-right: 10px; padding-left: 10px} # access a img {display: none} # rss {display: none} # branding # s {display: none} # access ul a {width: 100px }}

4. 4

   In the above Code, screen is used to specify a display device. It can also be a print printer or another device. Generally, screen is used. Or simply omit it. If you want to see a detailed description of media, You Can Baidu's knowledge about media query.

   END