宽屏模板做法 - 自适应页面

宽屏模板：
1.对于中间部分的缩放，使用js控制，代码如下：
用于的情况：当宽度缩放的时候，增加或者减少产品个数

<script type="text/javascript">    jqSmartCatalog(window).load(function() {        jqSmartCatalog('div.smart-columns-light').wpSmartColumns({columnWidth: 200, addListCssClass:'categories_list'});    });</script>html代码：<div class="smart-columns-light">    <ul class="smart categories_list">        <li>   </li>    </ul></div>

其中在上面的js中，需要三个参数为：
div.smart-columns-light
200  每个li的宽度
categories_list  ul标签的class

2
只显示当前行，下一行不显示的js用法

 <script type="text/javascript">        jqSmartCatalog(document).ready(function() {            jqSmartCatalog('div.smart-columns-home-<?php echo $uid; ?>').wpSmartColumns({columnWidth: <?php echo$_columnWidth; ?>, oneRow: true});        });    </script> <div class="smart-columns smart-columns-home-<?php echo $uid; ?> <?php echo "img_{$_imgWidth}_{$_imgHeight}"; ?>"> <ul class="products-grid smart show_through_js">    <li></li></ul></div>

3

@media all{  }
就表示all所有媒体类型的样式

4
如果想要在固定的宽度在加载这个css文件
可以在css文件的开头：

@media all and (min-width:480px) and (max-width:899px) {}然后在里面写css代表的是当宽度为min-width:480px 和max-width:899px 时加载下面的css。example:@media all and (min-width:1300px) {    .fw {        width: 40%;    }    .right_cat {        width: 59%;    }}@media all and (max-width:1299px) {    .fw {        width: 100%;    }    .right_cat {        width: 100%;    }}

上面的意思是当宽度小于1300px的时候。