Use @media to realize several key resolutions in web page adaptation_html/css_WEB-ITnose

I often have headaches due to misaligned layouts on different resolution devices or different window sizes. You can use @media screen to implement adaptive web layout, but how to be compatible with all mainstream devices becomes a problem. What is the resolution when setting it?

Methods/steps

1. 1

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

   768, 992, 1200. Of course, in the past, some devices had a width of 600-480, and we classified those with small resolutions as less than 767. Why is it less than 767 instead of 768? That’s because in CSS @media (min-width: 768px) means that the minimum is 768, which is >=768. There is equal to here, so we use @media ( max-width: 767px) Here means <=767 and there will be no conflict

2. 2

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

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

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

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

   Pay attention to the order. If you write @media (min-width: 768px) below, it will be very tragic,

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

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

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

   Because if it is 1440, since 1440>768, your 1200 will be invalid.

   So when we use min-width, the small ones are on top and the big ones are on the bottom. Similarly, if we use max-width, the big ones are on top and the small ones are on the bottom.

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

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

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

3. 3

   After the above introductory learning, we You can flexibly create 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} }

4. 4

   Screen is used in the above code. The monitor is specified as the display device. It can also be a print printer and other devices. Generally, we use screen. Or omit it altogether. If you want to see detailed explanations about media, you can Baidu to learn about media query

   END