REM响应式布局理解与Swiper的使用

REM响应式布局

REM: 根据根元素html的font-size值来设置大小
EM: 根据body元素font-size值设置大小
REM响应式布局只做移动端
使用方法：
1.如果html:font-size: 15px,那么 1rem=15px;
2.如果设计稿宽为640px,则html:font-size=屏幕宽度/640*15px,dom中20px等于20/15=1.3rem；

+function () {
    var desW = 640,
        broW = document.documentElement.clientWidth,
        main = document.querySelector("#main");
    if (broW > desW) {
        main.style.width = desW + "px";
        main.style.margin = "0 auto";
        return;
    }
    var ratio = broW / desW;
    document.documentElement.style.fontsize = ratio * 15 + "px";
}();

Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择Swiper2.x（甚至支持IE7）。

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                ![](image/1.jpg)
            </div>
            <div class="swiper-slide">
                ![](image/2.jpg)
            </div>
            <div class="swiper-slide">
                ![](image/3.jpg)
            </div>
            <div class="swiper-slide">
                ![](image/4.jpg)
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>

var mySwiper = new Swiper('.swiper-container', {
    direction: 'horizontal',// 水平播放
    loop: true,// 循环
    autoplay: 5000,// 5s
    autoplayDisableOnInteraction: false,// 手势操作后继续轮播
    pagination: '.swiper-pagination',// 分页器
    paginationClickable :true,// 分页器可以点击
    lazyLoading : true// 图片懒加载
});