• CSS如何根据浏览分辨率的大小动态设置div的宽度?
  • 发布于 2个月前
  • 166 热度
    2 评论
  • 放羊娃
  • 0 粉丝 30 篇博客
  •   

我现在想实现这样一个效果:当浏览器的宽度小于500像素时,div的宽度设置为100%,当浏览器的宽度大于500像素,小于1360像素时,div的宽度设置为50%(也就是两列显示),当浏览器的宽度大于1360像素时,div的宽度设置成33%,请问这种效果如果不用jquery,用纯CSS要如何实现?


用户评论
  • 火凤凰
  • 要实现你说的根据浏览器分辨率大小动态设置div的宽度其实并不难,这里提供几种思路,

    1.根据浏览器的分辨率动态调用css文件


    <SCRIPT language=javascript>
    <!-- Begin
    if (screen.width <= 500)
    {
    document.write('<link href="/Css/Style1.css" rel="stylesheet" type="text/css" />');
    } 
    else if (screen.width > 500 &&screen.width<=1360)
    {
    document.write('<link href="/Css/Style2.css" rel="stylesheet" type="text/css" />');
    } 
    else
    {
    document.write('<link href="/Css/Style3.css" rel="stylesheet" type="text/css" />');
    }
    </SCRIPT>

    2.使用CSS的@media规则,可以参考如下实例

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>无标题文档</title> 
    <style> 
    .abc{ height:300px; border:1px solid #000; margin:0 auto} 
    @media screen and (min-width: 1201px) { 
    .abc {width: 1200px}  
    } 
    /* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ 
     
    @media screen and (max-width: 1200px) { 
    .abc {width: 900px}  
    } 
    /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ 
     
    @media screen and (max-width: 900px) { 
    .abc {width: 200px;}  
    } 
    /* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */ 
     
    @media screen and (max-width: 500px) { 
    .abc {width: 100px;}  
    } 
    /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */ 
     
    </style> 
    </head> 
    <body> 
    <div class="abc">DIVCSS5实例:我这个DIV宽度会随浏览器宽度变化哦,试试改变浏览器宽度</div> 
    </body> 
    </html> 


  • 2018/6/14 22:50:00 [ 0 ] [ 0 ] 回复