文档章节

移动端布局那些事

o
 osc_gu9d45li
发布于 2019/04/09 00:27
字数 1067
阅读 0
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

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>



 

 
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Netty那点事(三)Channel与Pipeline

Channel是理解和使用Netty的核心。Channel的涉及内容较多,这里我使用由浅入深的介绍方法。在这篇文章中,我们主要介绍Channel部分中Pipeline实现机制。为了避免枯燥,借用一下《盗梦空间》的...

黄亿华
2013/11/24
2W
22
浅入浅出Android(003):使用TextView类构造文本控件

基础: TextView是无法供编辑的。 当我们新建一个项目MyTextView时候,默认的布局(/res/layout/activity_main.xml)中已经有了一个TextView: <TextView 运行效果如下: 修改其文本内容...

樂天
2014/03/22
679
1
树莓派(Raspberry Pi):完美的家用服务器

自从树莓派发布后,所有在互联网上的网站为此激动人心的设备提供了很多有趣和具有挑战性的使用方法。虽然这些想法都很棒,但树莓派( RPi )最明显却又是最不吸引人的用处是:创建你的完美家用...

异次元
2013/11/09
7.1K
8
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.2K
1
响应式框架--Groundwork

GroundworkCSS 是一个基于 Sass 预处理器的开源项目 ,主要用于快速构建响应式 Web 应用程序。拥有一个灵活的、可嵌套的网格系统,可以创建适应多种浏览设备的布局。 Groundwork 还提供多种 ...

匿名
2013/02/25
2.8W
4

没有更多内容

加载失败,请刷新页面

加载更多

SQL 语句大全

点击上方“掌上编程”,选择“置顶或者星标” 优质文章第一时间送达! 一、基础 「1、说明:创建数据库」 CREATE DATABASE database-name    「2、说明:删除数据库」 drop database ...

GeneralMa
昨天
0
0
山东创睦网络科技有限公司:使用Python爬取全球新冠肺炎疫情数据

使用Python爬取全球新冠肺炎疫情数据 导入所需库包 获取实时数据的url 正式编写程序 查看输出结果 导入所需库包 在获取数据之前,我们需要先安装好所需的包requests和pandas: 1.如果是使用p...

osc_qv1fwke0
47分钟前
14
0
如何1年获得别人3年的工作经验(深度好文)

最近有同学问我,为什么你的工作年限不长,技术却这么厉害,我笑了笑,啥也没说。 我不是不想回答,是不知道怎么回答。在他们的定位可能就是,每方面都懂一点,遇到问题能够快速解决,就是比...

zhang_rick
今天
1
0
新基建带动行业

什么是“新基建”? 什么是“新基建”? 根据央视发布的信息来看,其涵盖了5G基站建设、新能源汽车充电桩、大数据中心、人工智能、工业互联网,特高压,城际以及城轨交通,涉及了七大领域和相...

osc_anefoz50
47分钟前
16
0
怕入错行?这群技术人写了本“择业指南”

计算机专业好找工作吗?哪些方向是当前的主流和热门方向呢? 计算机专业的你是不是还在为职业发展纠结犹豫呢? 刚经历完高考选专业的你是不是还在迷茫徘徊呢? 那么福利来啦! 《软件技术职业...

阿里云云栖号
47分钟前
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部