Using @media to realize several key resolutions in Web page self-adaptation

Often headaches for different resolution devices or layouts with different window sizes, you can use @media screen to adapt to the layout of your Web page, but it's a problem to be compatible with all major devices. What is the resolution setting?

Method/Step

2. 1

   First look at the following code, which is traversed from the bootstrap, min-width to confirm that the difference is

   768, 992, 1200. Of course, in the past there are some equipment width is 600 480, which small resolution of we are classified as less than 767. Why is less than 767 instead of 768, that is because in the CSS @media (min-width:768px) means that the minimum is 768 is >=768, here is equal, so we judge the smaller device with @media (MAX-WIDTH:767PX) This way, it means there's no conflict <=767.

4. 2

   From the above we can see the resolution of a few critical points, then we can easily write their own adaptive code

   @media (min-width:768px) {//>=768 device}

   @media (min-width:992px) {//>=992 device}

   @media (min-width:1200) {//>=1200 device}

   Note the order, and if you write @media (min-width:768px) down there, it's tragic.

   @media (min-width:1200) {//>=1200 device}

   @media (min-width:992px) {//>=992 device}

   @media (min-width:768px) {//>=768 device}

   Because if it is 1440, because of 1440>768 then your 1200 will fail.

   So when we use the min-width, the small placed above the big in the following, similarly if is with Max-width so is big in above, small in below

   @media (max-width:1199) {//<=1199 device}

   @media (max-width:991px) {//<=991 device}

   @media (max-width:767px) {//<=768 device}

5. 3

   Through the above introductory study, we can be flexible to point to advanced hybrid applications

   @media screen and (min-width:1200px) {#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:650px;} #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:450px;} #content,. div1{width:420px;position:relative;} #secondary {Display:none} #access {width:450px;} #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 ul a{width:100px}}

7. 4

   The code above uses screen to specify whether the display is a display device, or it can be a print printer, and so on. or simply omit it. If you want to see a detailed description of media can Baidu a bit about media query knowledge

   END

Using @media to realize several key resolutions in Web page self-adaptation