REM響應式布局

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">


</div> <div class="swiper-slide">


</div> <div class="swiper-slide">


</div> <div class="swiper-slide">


</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// 圖片懶載入});

推薦閱讀：