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// 图片懒加载
});