移動端布局那些事
阿新 • • 發佈：2019-04-09
角度 信息 兩個 max-width ntb tle win event set
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(
四個方向滑動:
<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>
移動端布局那些事