关于于less的响应式布局

来源：互联网发布：生酮饮食都吃什么知乎编辑：程序博客网时间：2024/05/16 06:10

如题。使用 less实现一个静态网站布局

务必确保在 less.js 之前加载你的样式表。

<link rel="stylesheet/less" type="text/css" href="css/thetest.less"/><script src="js/less.min.js" type="text/javascript" charset="utf-8"></script>

HTML代码如下：

<header>头部</header><nav>导航</nav><section><aside>左边</aside><article>中间主要内容</article><aside>右边</aside></section><footer>尾部</footer>

less代码如下：

//less实现响应式布局.fun(@fullwidth,@width){    header,nav,footer,section{        margin:10px auto;        background:#ccc;        text-align:center;        height:100px;        width: @fullwidth;    }    section{        background:transparent;        overflow:hidden;        aside,article{            height:@width + 100px;background:#f00;        }        & aside:first-child{            width:@width;            float:left;                   }        & aside:last-child{            width:@width;            float:right;        }        & article{            margin: 0 5px;            width:(@fullwidth - @width * 2) - 10%;            float:left;            }    }    }.fun(1200px,200px);@media (max-width:1200px){    .fun(960px,180px);}@media (max-width:768px){    .fun(480px,80px);}@media (max-width:480px){    .fun(100%,10%);}

阅读全文

0 0