三、移动端轮播图的实现
布局 <div id="app"> <div id="swiper-container"> <!-- 幻灯片的结构 --> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="./img/1.jpg"></div> <div class="swiper-slide"><img src="./img/2.jpg"></div> <div class="swiper-slide"><img src="./img/3.jpg"></div> <div class="swiper-slide"><img src="./img/4.jpg"></div> <div class="swiper-slide"><img src="./img/5.jpg"></div> </div> <!-- 导航点 ...
二、移动端的适配问题
尺寸适配 只需要将viewport width等于设计稿的宽度即可。 <meta name='viewport' content='width=750,user-scalable=no'> less与rem适配 less文件 @font-size: 设计稿的宽度 / 10rem; #box{ width: 200/@font-size; height: 100/@font-size; } 使用js做根元素的调整 document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; window.onresize = function () { document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; }
一、移动端的事件
视口控制 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no, maximum-scale=1.0, minimum-scale=1.0" /> 事件 var box = document.querySelector('#box') // 元素上触摸开始时触发 box.addEventListener('touchstart', function () { box.style.backgroundColor = 'red' }) // 元素上触摸移动时触发 box.addEventListener('touchmove', function () { box.style.backgroundColor = 'yellow' console.log('touchmove触发了！') }) // 手指从元素上离开时触发 box.addEventListener('tou ...
