css判断不同分辨率显示不同宽度布局实现自适应宽度

1、DIVCSS小案例描述
我们首先设置一个DIV盒子CSS命名为“.abc”,设置其高度为300px,css边框为黑色;以及设置margin:0 auto布局居中。预先设置这两个样式是为了便于观察。
我 们通过手动拖拽浏览器显示宽度,然后观察此盒子宽度变化情况,当浏览器宽度调节到宽度不大于500px时,对应此盒子宽度显示100px;调节浏览器宽度 不大于901px时,显示“.abc”对应盒子宽度显示200px;当调节浏览器宽度大于1201px时,盒子对象宽度显示1200px;当小于 1200px时候显示宽度为900px。

?
1
2
3
4
5
6
7
8
9
10
11
12
.abc{  height : 300px border : 1px  solid  #000 margin : 0  auto
@media  screen  and ( min-width 1201px ) { .abc { width 1200px }  
/* css注释:设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ 
  
@media  screen  and ( max-width 1200px ) { .abc { width 900px }  
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ 
  
@media  screen  and ( max-width 901px ) { .abc { width 200px ;}  
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */ 
  
@media  screen  and ( max-width 500px ) { .abc { width 100px ;}  
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */

需要注意是CSS代码顺序,由大到小排版CSS(判断浏览器宽度越大越放前),这样是因为逻辑关系,@media判断CSS排错将导致判断失效。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
    "utf-8"  /> 无标题文档     "abc" >DIVCSS 5 实例:我这个DIV宽度会随浏览器宽度变化哦,试试改变浏览器宽度
  

4、为了兼容IE9以下版本浏览器需要加入一个google的JS,当然可以下载引人html

?
1
2
3

5.完美兼容

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< code  class = "hljs xml"  style = "padding:10px;line-height:1.4;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;" >< span  class = "hljs-meta"  style = "color:rgb(127,159,127);" > span > < span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-tag" >< span >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >html span > span > span >< span  class = "hljs-tag" >> span > span > < span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-tag" >< span >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >head span > span > span >< span  class = "hljs-tag" >> span > span > < span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-tag" >< span >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >meta span > span > span >< span  class = "hljs-tag" span >< span  class = "hljs-attr" >< span  class = "hljs-tag" >< span  class = "hljs-attr" >charset span > span > span >< span  class = "hljs-tag" >= span >< span  class = "hljs-string"  style = "color:rgb(204,147,147);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-string"  style = "color:rgb(204,147,147);" >"utf-8" span > span > span >< span  class = "hljs-tag" > /> span > span > < span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-tag" >< span >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >title span > span > span >< span  class = "hljs-tag" >> span > span >无标题文档< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-tag" > span >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >title span > span > span >< span  class = "hljs-tag" >> span > span > < span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-tag" >< span >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >style span > span > span >< span  class = "hljs-tag" >> span > span >< span  class = "css" >< span  class = "css" span >< span  class = "hljs-selector-class"  style = "color:rgb(239,239,143);" >< span  class = "css" >< span  class = "hljs-selector-class" >.abc span > span > span >< span  class = "css" >{  span >< span  class = "hljs-attribute"  style = "color:rgb(239,220,188);" >< span  class = "css" >< span  class = "hljs-attribute" >height span > span > span >< span  class = "css" >: span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >300px span > span > span >< span  class = "css" >;  span >< span  class = "hljs-attribute"  style = "color:rgb(239,220,188);" >< span  class = "css" >< span  class = "hljs-attribute" >border span > span > span >< span  class = "css" >: span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >1px span > span > span >< span  class = "css" > solid  span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >#000 span > span > span >< span  class = "css" >;  span >< span  class = "hljs-attribute"  style = "color:rgb(239,220,188);" >< span  class = "css" >< span  class = "hljs-attribute" >margin span > span > span >< span  class = "css" >: span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >0 span > span > span >< span  class = "css" > auto} 
@ span >< span  class = "hljs-keyword"  style = "color:rgb(227,206,171);" >< span  class = "css" >< span  class = "hljs-keyword" >media span > span > span >< span  class = "css" > screen and (min-width:  span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >1201px span > span > span >< span  class = "css" >) {  span >< span  class = "hljs-selector-class"  style = "color:rgb(239,239,143);" >< span  class = "css" >< span  class = "hljs-selector-class" >.abc span > span > span >< span  class = "css" > { span >< span  class = "hljs-attribute"  style = "color:rgb(239,220,188);" >< span  class = "css" >< span  class = "hljs-attribute" >width span > span > span >< span  class = "css" >:  span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >1200px span > span > span >< span  class = "css" >}  
span >< span  class = "hljs-comment"  style = "color:rgb(127,159,127);" >< span  class = "css" >< span  class = "hljs-comment" >/* css 注释说明:设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ span > span > span >< span  class = "css"
  
@ span >< span  class = "hljs-keyword"  style = "color:rgb(227,206,171);" >< span  class = "css" >< span  class = "hljs-keyword" >media span > span > span >< span  class = "css" > screen and (max-width:  span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >1200px span > span > span >< span  class = "css" >) {  span >< span  class = "hljs-selector-class"  style = "color:rgb(239,239,143);" >< span  class = "css" >< span  class = "hljs-selector-class" >.abc span > span > span >< span  class = "css" > { span >< span  class = "hljs-attribute"  style = "color:rgb(239,220,188);" >< span  class = "css" >< span  class = "hljs-attribute" >width span > span > span >< span  class = "css" >:  span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >900px span > span > span >< span  class = "css" >}  
span >< span  class = "hljs-comment"  style = "color:rgb(127,159,127);" >< span  class = "css" >< span  class = "hljs-comment" >/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ span > span > span >< span  class = "css"
  
@ span >< span  class = "hljs-keyword"  style = "color:rgb(227,206,171);" >< span  class = "css" >< span  class = "hljs-keyword" >media span > span > span >< span  class = "css" > screen and (max-width:  span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >900px span > span > span >< span  class = "css" >) {  span >< span  class = "hljs-selector-class"  style = "color:rgb(239,239,143);" >< span  class = "css" >< span  class = "hljs-selector-class" >.abc span > span > span >< span  class = "css" > { span >< span  class = "hljs-attribute"  style = "color:rgb(239,220,188);" >< span  class = "css" >< span  class = "hljs-attribute" >width span > span > span >< span  class = "css" >:  span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >200px span > span > span >< span  class = "css" >;}  
span >< span  class = "hljs-comment"  style = "color:rgb(127,159,127);" >< span  class = "css" >< span  class = "hljs-comment" >/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */ span > span > span >< span  class = "css"
  
@ span >< span  class = "hljs-keyword"  style = "color:rgb(227,206,171);" >< span  class = "css" >< span  class = "hljs-keyword" >media span > span > span >< span  class = "css" > screen and (max-width:  span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >500px span > span > span >< span  class = "css" >) {  span >< span  class = "hljs-selector-class"  style = "color:rgb(239,239,143);" >< span  class = "css" >< span  class = "hljs-selector-class" >.abc span > span > span >< span  class = "css" > { span >< span  class = "hljs-attribute"  style = "color:rgb(239,220,188);" >< span  class = "css" >< span  class = "hljs-attribute" >width span > span > span >< span  class = "css" >:  span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >100px span > span > span >< span  class = "css" >;}  
span >< span  class = "hljs-comment"  style = "color:rgb(127,159,127);" >< span  class = "css" >< span  class = "hljs-comment" >/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */ span > span > span >< span  class = "css"
  span > span >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" ><

你可能感兴趣的:(screen自适应(适配))