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

Often for different resolution devices or different window size layout dislocation and headache, you can use @media screen to achieve the self-adaptation of the 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
The following is a CSS for your own theme, and only the main article frame is reserved for devices below width 768 to get the best reading experience in limited space.

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