work hard work smart

专注于Java后端开发。 不断总结，举一反三。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

JS 响应式布局

Posted on 2017-08-13 21:46  work hard work smart  阅读(252)  评论(0)  编辑  收藏  举报

1、media

效果为屏幕宽度变化时，背景颜色也变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @media screen and (max-width: 1024px){
            .bg{
                background-color: aqua;
            }
        }
        @media screen and (max-width: 980px) {
            .bg {
                background-color: red;
            }

        }
        @media screen and (max-width: 720px) {
            .bg {
                background-color: yellow;
            }

        }

        @media screen and (max-width: 640px) {
            .bg {
                background-color: green;
            }

        }

        @media screen and (max-width: 320px) {
            .bg {
                background-color: darkgray;
            }

        }
    </style>
</head>
<body class="bg">

</body>
</html>

　　

2. 弹性图片

样式如下面的code

 .img 和 img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @media screen and (max-width: 1024px){
            .bg{
                background-color: aqua;
            }
        }
        @media screen and (max-width: 980px) {
            .bg {
                background-color: red;
            }

            /*使用流体图片*/
            img {
               max-width: 100%;
                height: auto;
                width: auto\9; /* ie8 */
                position: absolute;
                width:600px;
                top:-25%;
            }

            .img{
                height: 200px;
                border:1px solid sandybrown;
                overflow:hidden;
                margin-bottom:10px;
               display: block;
               position: relative;
            }

        }
        @media screen and (max-width: 720px) {
            .bg {
                background-color: yellow;
            }

        }

        @media screen and (max-width: 640px) {
            .bg {
                background-color: green;
            }

        }

        @media screen and (max-width: 320px) {
            .bg {
                background-color: darkgray;
            }

        }
    </style>
</head>
<body class="bg">
  <div  style="margin-top: 300px" class="img">
      <img src="image/img1.jpg" />
  </div>
</body>
</html>