CSS to determine different resolutions show different width layout CSS3 technical support IE6 to IE8
CSSDetermining different resolution browsers（ display screen） Show different widths dispositionCSS3 Technical SupportIE6 up toIE8。 will be usedcss3 @media Judgment by style， howeverIE9 The following versions are not supportedCSS3 technical， hereDIVCSS5 To give you an overview of the process of passingJS Implemented to support lower versions of browsers as wellCSS3 Achieving a practical layout。
one、 Description of the practical scope - TOP
CSS DIV Page layout when the resolution is less than or equal to 1024px (pixels) DIV layout Object display1000px widths， When the resolution is greater than1024px Time to display1200px widths etc. needs。 useCSS Implementing changing browser display widths Thus, the layout of the page widths Dynamic change changes（ web page widths Automatic display with browser widths And widen and narrow）。
With development， More and more computer users have higher and higher resolution displays， However, some users still use1024px The resolution of the display（ Based on several browser resolution statistics platforms to get data now using1200 Very few users below resolution， Liberal PartyCSS The layout still needs to consider at least1024px Resolution Users）， If the page layout widths fix to1200px，1024 The resolution user browses the web with a scroll bar at the bottom of the browser， To solve this problem， Everyone can find out more by using theCSS3 Styles to determine the user's browser widths Thus calling different layouts widths。
2、 useCSS Vocabulary and Grammar - TOP
@media screen and ( Judgmental properties){ CSS Style Selector }
Note here that the brackets should be changed CSS Style Selector。
three、 Different resolutions are displayed differently widths Style Case - TOP
1、DIVCSS Small case description We start by setting up a DIV Box CSS Naming to ".abc", set its high level for 300px. css borders to black; and setting margin:0 The auto layout is centered. The two styles are pre-set for ease of observation.
We show the browser by manually dragging and dropping the widths， Then observe this box widths Changes， When the browser widths Adjust to widths no greater than500px time， Corresponding to this box widths shows100px； Adjusting the browser widths no greater than901px time， shows“.abc” Corresponding box widths shows200px; When adjusting the browser widths more than, >1201px time， Box objects widths shows1200px； When less than1200px Time to display widths because of900px。
2、CSS code
.abc{height:300px;border:1pxsolid#000;margin:0auto}
@mediascreenand(min-width:1201px){
.abc{width:1200px}
}
/*css add comments to text： Browser is set widths not less than1201px timeabc shows1200px widths*/
@mediascreenand(max-width:1200px){
.abc{width:900px}
}
/* Browser is set widths no greater than1200px timeabc shows900px widths*/
@mediascreenand(max-width:901px){
.abc{width:200px;}
}
/* Browser is set widths no greater than901px timeabc shows200px widths*/
@mediascreenand(max-width:500px){
.abc{width:100px;}
}
/* Browser is set widths no greater than500px timeabc shows100px widths*/It is important to note that CSS Code Order, from large to small layout CSS (judging the larger the width of the browser put before), so that because of the logical relationship, @media judging CSS row wrong will lead to judgment failure.
3、 HTML code
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title> Untitled document</title>
<style>
.abc{height:300px;border:1pxsolid#000;margin:0auto}
@mediascreenand(min-width:1201px){
.abc{width:1200px}
}
/* Browser is set widths not less than1201px timeabc shows1200px widths*/
@mediascreenand(max-width:1200px){
.abc{width:900px}
}
/* Browser is set widths no greater than1200px timeabc shows900px widths*/
@mediascreenand(max-width:900px){
.abc{width:200px;}
}
/* Browser is set widths no greater than900px timeabc shows200px widths*/
@mediascreenand(max-width:500px){
.abc{width:100px;}
}
/* Browser is set widths no greater than500px timeabc shows100px widths*/
</style>
</head>
<body>
<divclass="abc">DIVCSS5 an actual example： I'm a...DIV widths It will follow the browser widths Change Oh， Try changing your browser widths</div>
</body>
</html>4, in order to be compatible with IE9 below the version of the browser need to add a google JS, of course you can download engaging html
<!--[ifltIE9]> <scriptsrc="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
willJS Code into</head> Just before the label， Here's a direct quotegoogle onlineJS， You can download thisJS File re.HTML induce。
5. Perfectly compatible with all major browsersHTML +CSS+JS source code
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title> Untitled document</title>
<style>
.abc{height:300px;border:1pxsolid#000;margin:0auto}
@mediascreenand(min-width:1201px){
.abc{width:1200px}
}
/*css Annotation： Browser is set widths not less than1201px timeabc shows1200px widths*/
@mediascreenand(max-width:1200px){
.abc{width:900px}
}
/* Browser is set widths no greater than1200px timeabc shows900px widths*/
@mediascreenand(max-width:900px){
.abc{width:200px;}
}
/* Browser is set widths no greater than900px timeabc shows200px widths*/
@mediascreenand(max-width:500px){
.abc{width:100px;}
}
/* Browser is set widths no greater than500px timeabc shows100px widths*/
</style>
<!--[ifltIE9]>
<scriptsrc="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<divclass="abc">DIVCSS5 an actual example： I'm a...DIV widths It will follow the browser widths Change Oh， Try changing your browser widths</div>
</body>
</html>6、Screenshot of the effect Because of the settings widths reason， Inconvenient screenshots， You can view the online case directly， Changing the browser by dragging and dropping widths Observe the effect。
7. Online presentation. View Case
8, complete case code file package download
Recommended>>
1、AdvancedMaterialsTechnologies Artificial Neural Architectures Artificial Synapses Based on Charge Capture Devices
2、同城沧州麻将作弊器同城麻将外挂沧州麻将辅助透视软件通用版
3、Why is the WeChat app Guess the Picture Song on the screen of friends
4、Where to go from here for mainframe electrical and electronics personnel above
5、Looking at the future of DApps from EOS game development