移动端布局那些事

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 || window.event;
            startX = event.touches[0].pageX;
            startY = event.touches[0].pageY;  
            // console.log(‘按下‘)
        })
        document.addEventListener("touchend",function(event){
            var event = event || window.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 window ? 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, window);

</script>



 

 

移动端布局那些事

上一篇:CultrueInfo


下一篇:C#版本与.NET版本对应关系