关于于less的响应式布局

如题。使用 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%);
}