移動端佈局那些事

時間 2019-12-06

標籤移動佈局那些欄目無線简体版

原文原文鏈接

1,移動端的常見開發方式:html

響應式：一套代碼能夠兼容移動端，pc端，pad端。因此說代碼不會特別複雜，內容也不會特別的多，尤爲是動畫

自適應：根據不一樣的設備去加載不一樣的代碼，pad一套，pc一套，phone一套。最多見一種

媒體查詢: 百分比，寫自適應的時候就不須要考慮太多,想要作的更細膩，就必須把媒體查詢寫的更細化.

2,移動端的滑動事件(touch):

　　touchstart :按下;

touchend: 擡起;

touchmove: 移動;

而每一個觸摸事件都包括了三個觸摸列表，每一個列表裏包含了對應的一系列觸摸點（用來實現多點觸控）：

touches：當前位於屏幕上的全部手指的列表。android

targetTouches：位於當前DOM元素上手指的列表。瀏覽器

changedTouches：涉及當前事件手指的列表。安全

每一個觸摸點由包含了以下觸摸信息（經常使用）：session

　　identifier：一個數值，惟一標識觸摸會話（touch session）中的當前手指。通常爲從0開始的流水號（android4.1，uc）iphone

　　target：DOM元素，是動做所針對的目標。ide

　　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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。