移动端布局那些事
1,移動端的常見開發(fā)方式:
響應(yīng)式： 一套代碼可以兼容移動端，pc端，pad端。所以說代碼不會特別復(fù)雜，內(nèi)容也不會特別的多，尤其是動畫 自適應(yīng)：根據(jù)不同的設(shè)備去加載不同的代碼，pad一套，pc一套，phone一套。最常見一種 媒體查詢: 百分比，寫自適應(yīng)的時(shí)候就不需要考慮太多,想要做的更細(xì)膩，就必須把媒體查詢寫的更細(xì)化. 2,移動端的滑動事件(touch): touchstart :按下; ?touchend: 抬起; touchmove: 移動; 而每個(gè)觸摸事件都包括了三個(gè)觸摸列表，每個(gè)列表里包含了對應(yīng)的一系列觸摸點(diǎn)（用來實(shí)現(xiàn)多點(diǎn)觸控）：touches：當(dāng)前位于屏幕上的所有手指的列表。
targetTouches：位于當(dāng)前DOM元素上手指的列表。
changedTouches：涉及當(dāng)前事件手指的列表。
每個(gè)觸摸點(diǎn)由包含了如下觸摸信息（常用）：
identifier：一個(gè)數(shù)值，唯一標(biāo)識觸摸會話（touch session）中的當(dāng)前手指。一般為從0開始的流水號（android4.1，uc）
target：DOM元素，是動作所針對的目標(biāo)。
pageX/pageX/clientX/clientY/screenX/screenY：一個(gè)數(shù)值，動作在屏幕上發(fā)生的位置（page包含滾動距離,client不包含滾動距離，screen則以屏幕為基準(zhǔn)）。
radiusX/radiusY/rotationAngle：畫出大約相當(dāng)于手指形狀的橢圓形，分別為橢圓形的兩個(gè)半徑和旋轉(zhuǎn)角度。初步測試瀏覽器不支持，好在功能不常用.
?
首先為了防止事件觸發(fā)默認(rèn)行為，我們需要去禁止，安全的禁止方法：
// 判斷默認(rèn)行為是否可以被禁用if (e.cancelable) {// 判斷默認(rèn)行為是否已經(jīng)被禁用if (!e.defaultPrevented) {e.preventDefault();} } demo: 單指拖動: /*單指拖動*/ var obj = document.getElementById('id'); obj.addEventListener('touchmove', function(event) {// 如果這個(gè)元素的位置內(nèi)只有一個(gè)手指的話if (event.targetTouches.length == 1) {event.preventDefault();// 阻止瀏覽器默認(rèn)事件，重要 var touch = event.targetTouches[0];// 把元素放在手指所在的位置obj.style.left = touch.pageX-50 + 'px';obj.style.top = touch.pageY-50 + 'px';} }, false);四個(gè)方向滑動:
<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>/*目前手機(jī)屏幕最小的為320px，IP5的*/html{/*font-size: 62.5%;*/ /*瀏覽器的默認(rèn)字體大小是16px，62.5就是10px，方便計(jì)算*/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;}}/*想寫的更好看，就把媒體查詢寫的更細(xì)膩即可*/</style> </head> 1,推薦全部使用rem布局，容器使用百分比;em是相對父級的，rem是相對根元素的(html的 font-size值) 2.視口必須的:(psd和實(shí)際屏幕為1：1時(shí)使用) <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 3.移動端的時(shí)候，border不要寫成相對單位 4.注意手機(jī)的像素問題： iphone4為例： 物理像素 ：640px*960px 添加了視口就不需要去管了 邏輯像素 ：320*480px ? ? 以實(shí)際的開發(fā)為標(biāo)準(zhǔn) 像素比 2 4，js實(shí)現(xiàn)移動端視口(psd和實(shí)際屏幕比例不為1：1時(shí)使用) <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'; //根據(jù)psd圖的尺寸修改fontsize,psd寬度為320px時(shí)docEl.style.fontSize =100 * (clientWidth / 320) + 'px'; //根據(jù)psd圖的尺寸修改fontsize,psd寬度為640px時(shí)docEl.style.fontSize =50* (clientWidth / 320) + 'px'; //width增大就要縮小對應(yīng)比例的fontsize }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script>
?
?
總結(jié)
- 上一篇： 农村有前景的小生意有哪些 给着急创业的介
- 下一篇： 股票解除限售意味着什么