JS 响应式布局

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 >

　　

本文转自Work Hard Work Smart博客园博客，原文链接：http://www.cnblogs.com/linlf03/p/7354819.html，如需转载请自行联系原作者