Using @media screen to realize the self-adaptation of Web page layout

Using @media screen to realize the self-adaptation of Web page layout

Pros: No plugins and phone themes, friendly to mobile devices, adaptable to various window sizes. simply add the @media screen property to the CSS, judging by the browser width and outputting different length and width values

Above resolution (greater than 1200px)

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

1100 resolution (greater than 960px, less than 1199px)

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

880 resolution (greater than 768px, less than 959px)

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

720 resolution (greater than 480px, less than 767PX)

@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}}

440 below resolution (less than 479PX)

@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}}

Using @media screen to realize the self-adaptation of Web page layout