首页 > 代码库 > css响应式布局用法

css响应式布局用法

2024-07-24 13:37:23   219人阅读

1.使用内联样式的用法

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

<head lang="en">    <meta charset="UTF-8">    <title>响应式布局示例</title>    <style>        @media screen and (min-width: 800px) {            body {                background-color: red;            }        }        @media screen and (max-width: 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-width:800px)">  <link href="css/responsive2.css" rel="stylesheet" type="text/css" media="only screen and (max-width: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-width: 600px) {    body {        background: blue;    }}@media screen and (min-width: 900px) {    body {        background: red;    }}

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

 

 

 

 

 

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

css响应式布局用法


联系
我们