1, 移动端的常见开发方式:
响应式: 一套代码可以兼容移动端, pc 端, pad 端. 所以说代码不会特别复杂, 内容也不会特别的多, 尤其是动画
自适应: 根据不同的设备去加载不同的代码, pad 一套, pc 一套, phone 一套. 最常见一种
媒体查询: 百分比, 写自适应的时候就不需要考虑太多, 想要做的更细腻, 就必须把媒体查询写的更细化.
2, 移动端的滑动事件(touch):
touchstart : 按下;
touchend: 抬起;
touchmove: 移动;
而每个触摸事件都包括了三个触摸列表, 每个列表里包含了对应的一系列触摸点(用来实现多点触控):
touches: 当前位于屏幕上的所有手指的列表.
targetTouches: 位于当前 DOM 元素上手指的列表.
changedTouches: 涉及当前事件手指的列表.
每个触摸点由包含了如下触摸信息(常用):
identifier: 一个数值, 唯一标识触摸会话 (touch session) 中的当前手指. 一般为从 0 开始的流水号(android4.1,uc)
target:DOM 元素, 是动作所针对的目标.
pageX/pageX/clientX/clientY/screenX/screenY: 一个数值, 动作在屏幕上发生的位置(page 包含滚动距离, client 不包含滚动距离, screen 则以屏幕为基准).
radiusX/radiusY/rotationAngle: 画出大约相当于手指形状的椭圆形, 分别为椭圆形的两个半径和旋转角度. 初步测试浏览器不支持, 好在功能不常用.
首先为了防止事件触发默认行为, 我们需要去禁止, 安全的禁止方法:
- // 判断默认行为是否可以被禁用
- if (e.cancelable) {
- // 判断默认行为是否已经被禁用
- if (!e.defaultPrevented) {
- e.preventDefault();
- }
- }
demo:
单指拖动:
- /* 单指拖动 */
- var obj = document.getElementById('id');
- obj.addEventListener('touchmove', function(event) {
- // 如果这个元素的位置内只有一个手指的话
- if (event.targetTouches.length == 1) {
- event.preventDefault();// 阻止浏览器默认事件, 重要
- var touch = event.targetTouches[0];
- // 把元素放在手指所在的位置
- obj.style.left = touch.pageX-50 + 'px';
- obj.style.top = touch.pageY-50 + 'px';
- }
- }, false);
四个方向滑动:
- <script>var d1 = document.getElementById("d1");
- var startX;
- var startY;
- var endX;
- var endY;
- document.addEventListener("touchstart",function(event){
- var event = event || Windows.event;
- startX = event.touches[0].pageX;
- startY = event.touches[0].pageY;
- // console.log('按下')
- })
- document.addEventListener("touchend",function(event){
- var event = event || Windows.event;
- endX = event.changedTouches[0].pageX;
- endY = event.changedTouches[0].pageY;
- var X = endX - startX;
- var Y = endY - startY;
- var absX = Math.abs(X)> Math.abs(Y);
- var absY = Math.abs(Y)> Math.abs(X);
- if(X> 0 && absX){
- console.log('右划')
- }else if(X <0 && absX){
- console.log('左划')
- }else if(Y> 0 && absY){
- console.log('下划')
- }else if(Y <0 && absY){
- console.log('上划')
- }
- // console.log("抬起")
- })
- document.addEventListener("touchmove",function(){
- // console.log('移动')
- })
- </script>
jq 写法 demo:
- $("body").on("touchstart", function(e) {
- e.preventDefault();
- startX = e.originalEvent.changedTouches[0].pageX,
- startY = e.originalEvent.changedTouches[0].pageY;
- });
- $("body").on("touchmove", function(e) {
- e.preventDefault();
- moveEndX = e.originalEvent.changedTouches[0].pageX,
- moveEndY = e.originalEvent.changedTouches[0].pageY,
- X = moveEndX - startX,
- Y = moveEndY - startY;
- if ( X> 0 ) {
- alert('向左滑动');
- }
- });
3, 媒体查询:
- <head>
- <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
- <meta charset="UTF-8">
- <title > 移动端布局</title>
- <style>
- /* 目前手机屏幕最小的为 320px,IP5 的 */
- html{
- /*font-size: 62.5%;*/ /* 浏览器的默认字体大小是 16px,62.5 就是 10px, 方便计算 */
- font-size: 100px;
- }
- @media screen and (max-width: 319px){
- HTML{
- display: none;
- }
- }
- @media screen and (min-width: 320px) and (max-width: 330px){
- HTML{
- font-size: 110px;
- }
- }
- @media screen and (min-width: 331px) and (max-width: 340px){
- HTML{
- font-size: 120px;
- }
- }
- /* 想写的更好看, 就把媒体查询写的更细腻即可 */
- </style>
- </head>
1, 推荐全部使用 rem 布局, 容器使用百分比; em 是相对父级的, rem 是相对根元素的(HTML 的 font-size 值)
2. 视口必须的:(psd 和实际屏幕为 1:1 时使用)
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
3. 移动端的时候, border 不要写成相对单位
4. 注意手机的像素问题:
iphone4 为例:
物理像素 :640px*960px 添加了视口就不需要去管了
逻辑像素 :320*480px 以实际的开发为标准
像素比 2
4,JS 实现移动端视口(psd 和实际屏幕比例不为 1:1 时使用)
- <script>
- (function (doc, win) {
- var docEl = doc.documentElement,
- resizeEvt = 'orientationchange' in Windows ? 'orientationchange' : 'resize',
- recalc = function () {
- var clientWidth = docEl.clientWidth;
- if (!clientWidth) return;
- docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
- // 根据 psd 图的尺寸修改 fontsize,psd 宽度为 320px 时 docEl.style.fontSize =100 * (clientWidth / 320) + 'px';
- // 根据 psd 图的尺寸修改 fontsize,psd 宽度为 640px 时 docEl.style.fontSize =50* (clientWidth / 320) + 'px';
- //width 增大就要缩小对应比例的 fontsize
- };
- if (!doc.addEventListener) return;
- win.addEventListener(resizeEvt, recalc, false);
- doc.addEventListener('DOMContentLoaded', recalc, false);
- })(document, Windows);
- </script>
来源: https://www.cnblogs.com/1234wu/p/10674519.html