移动端布局那些事
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>
?
?
總結
- 上一篇： 农村有前景的小生意有哪些 给着急创业的介
- 下一篇： css炫酷动画收藏