zoukankan      html  css  js  c++  java
  • 根据分辨率改变宽度 demo

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>改变浏览器宽度实现DIV布局宽度改变 案例在线演示 DIVCSS5</title>
    <style>
    .abc{ height:300px; border:1px solid #000; margin:0 auto}
    @media screen and (min- 1201px) {
      .abc {width: 1200px} 
      }
    /* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
    
    @media screen and (max- 1200px) {
      .abc {width: 900px} 
      }
    /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
    
    @media screen and (max- 900px) {
      .abc {width: 200px;} 
        }
    /* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
    
    @media screen and (max- 500px) {
      .abc {width: 100px;} 
        }
    /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
    
    </style>
     <!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    </head>
    <body>
    <div class="abc"><a href="http://www.divcss5.com/" target="_blank">DIVCSS5</a>实例:我这个DIV宽度会随浏览器宽度变化哦,试试改变浏览器宽度</div>
    <p>返回 <a href="http://www.divcss5.com/jiqiao/j662.shtml">css实现分辨率浏览器宽度改变网页布局宽度</a><a href="http://www.divcss5.com/jiqiao/j662.shtml">http://www.divcss5.com/jiqiao/j662.shtml</a></p>
    </body>
    </html>
  • 相关阅读:
    管理反思(阶段)
    应用软件系统程序员的三个立面
    再优秀那么一点点
    TCP相关时延
    go wiki整理1
    慢就是快
    给自己一点机会
    竞争
    go mem
    币圈再次过年
  • 原文地址:https://www.cnblogs.com/hellowzd/p/4948013.html
Copyright © 2011-2022 走看看