三、移动端轮播图的实现
布局 1234567891011121314151617181920<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 ...
二、移动端的适配问题
尺寸适配 只需要将viewport width等于设计稿的宽度即可。 1<meta name='viewport' content='width=750,user-scalable=no'> less与rem适配 less文件 123456@font-size: 设计稿的宽度 / 10rem;#box{ width: 200/@font-size; height: 100/@font-size;} 使用js做根元素的调整 12345document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';window.onresize = function () { document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'p ...
一、移动端的事件
视口控制 1234<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no, maximum-scale=1.0, minimum-scale=1.0" /> 事件 123456789101112131415var box = document.querySelector('#box')// 元素上触摸开始时触发box.addEventListener('touchstart', function () { box.style.backgroundColor = 'red'})// 元素上触摸移动时触发box.addEventListener('touchmove', function () { box.style.backgroundColor = 'yell ...
