css响应式布局用法

1.使用内联样式的用法

在<head>标签中使用style,使用@media指定对应屏幕分辨率大小的样式

<head lang="en">
    <meta charset="UTF-8">
    <title>响应式布局示例</title>

    <style>
        @media screen and (min- 800px) {
            body {
                background-color: red;
            }
        }

        @media screen and (max- 800px) {
            body {
                background-color: blue;;
            }
        }
    </style>
</head>

这里分别使用了2个样式:当分辨率<=800时使用,背景色为blue;当分辨率>=800时使用,背景色为red;

2.使用外链样式表的引用

  <link href="css/responsive1.css" rel="stylesheet" type="text/css" media="only screen and (min-800px)">
  <link href="css/responsive2.css" rel="stylesheet" type="text/css" media="only screen and (max-800px)">

这里是指定了在不同分辨率下使用不同的CSS文件,效果和上面的一样.

3.同样的在同一个样式文件中声明

    <meta name="viewport" content="width = device-width,initial-scale=1"/>
    <link href="css/responsive.css" rel="stylesheet" type="text/css"/>

body {
    margin: 0px auto;
}

@media screen and (max- 600px) {
    body {
        background: blue;
    }
}

@media screen and (min- 900px) {
    body {
        background: red;
    }

}

这样只需在一个文件里声明,对应每个需要设置的样式可以单独设置

参考文章http://www.cnblogs.com/lhb25/archive/2012/12/04/css3-media-queries.html