移动端开发笔记

一. 移动端基本环境

视口 基于设备坐标

• viewport 视口 默认不设置在移动端是980
• width (number||device-width)
• user-scalable =no
• initial-scale
• maximum-scale
• minimum-scale

二. 移动端常见的一些问题

• 清除点击阴影 : -webkit-tap-highlight-color:rgba(0,0,0,0)
• 消除圆角按钮 : -webkit-appearance:none
• 选中文字设置 :-webkit-user-select：none //(安卓不兼容)
• 禁止文字缩放 :-webkit-text-size-adjust：100%

适配

• viewport
• 百分比
• rem适配
• 弹性盒模型(box版和flex版)

(function(){
  var w = window.screen.width;
    var targetW = 320;
    var scale = w/targetW; //当前尺寸/目标尺寸
    var meta = document.createElement("meta");
    meta.name = "viewport";
    meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
    //console.log(scale);
    document.head.appendChild(meta);
})()

三.移动端布局

rem计算

• 设计图选取 建议最小750
• 利用less计算rem
• 怪异盒模型
• font-face
• boodstrap字体组件

Less搭建环境

Less 的语法不能直接被浏览器解析需要 编译器 -->转换css

(1) 在客户端使用less

在HTML页面中引入.less文件,再引入一个Less转换程序(是一个.js文件),让客户端同时下载html/less/js 转换器,在客户端运行.js把less转换成css样式

 <link rel="stylesheet/less" href="css/index.less"/>
 <script src="js/less.min.js"></script>

(2) 在服务器端使用less(推荐使用)

开发人员使用一个命令行工具(less编译器),把.less编译为.css,在HTML页面中,直接引入编译好的.css文件即可

less用法1 - 服务器端使用npm在线安装less编译器.png

(1)下载并安装一款服务器端的JS解释器:Node .JS(独立于浏览器的V8引擎解释器,用来运行js脚本)
(2)下载并安装Less编译器程序:lessc(Compiler)--是一个运行在服务器端的JS脚本程序
(3)运行Node,执行lessc转换程序,把一个.less文件编译为一个.css即可

• 直接在命令行中执行lessc xx.less
• 把lessc 编译器配置为webStorm中的FileWatcher,只要用户在WS中创建/保存一个.less文件,即会自动编译出对应的.css文件(推荐)

webStorm配置示例.png

webStorm设置监听less文件自动转化css -----> settings==>Tools==>file watcher ==> +less

保存后,修改任意的.less文件并保存,即可自动生成一个.css文件
提示:若无法生成,检查npm配置步骤,重启WebStorm,再次检查上述几步过程,再次尝试
less中文网: http://lesscss.cn/

关于rem的介绍以及less动态计算

//可以引用这句话
document.getElementsByTagName("html")[0].style.fontSize=document.documentElement.clientWidth+"px";

但是再写的完成一些 相当于jq里的$.ready() 至于DOMContentLoaded的兼容性问题 还可以再研究一下

(function () {
    document.addEventListener('DOMContentLoaded', function () {
       document.getElementsByTagName("html")[0].style.fontSize=document.documentElement.clientWidth+"px";
    }, false);
})();

rem--em | r-->rood 根据根节点字体大小计算 | em 根据父元素计算单位
来了
1.html中默认的 font-size:16px; 也就是 1rem = 16px
2.以设计宽度为750px为例，那么定义 font-size:50px; 那么 1rem = 50px，比例为：750/50=15
3.定义页面中的尺寸，就是: 宽度/50 rem（比例为15）。例如：设计稿中dom（20px）的尺寸为：20px/50=0.4rem
4.针对不同屏幕尺寸，按同比例设置font-size（比例仍为15）。相当于1rem 变成对应大小（font-size变小多少，1rem就同比例变小多少）。
5.例如：
屏幕宽度为750px，则html设置的font-size为：750/15 = 50，设计稿中dom（20px）的尺寸为：20px/50=0.4rem，1rem = 50px
屏幕宽度为320px，则html设置的font-size为：320/15 = 21.33....，设计稿中dom（20px）的尺寸依然为：20px/50=0.4rem，1rem = 320/750*50px

rem比例公式.png

//配置好less监听,了解rem就可以开始写啦!要配置一样根节点的字体大小
  document.getElementsByTagName("html")[0].style.fontSize=document.documentElement.clientWidth/15+"px";
//可以在less文件里这样写 声明变量,然后计算
@r:50rem;
#header{height:120/@r;font-size:14/@r;width:750/@r;}

//解注: 以设计图为750为例,不然可以直接在变量处写成750 ,但是算下来小数位太长了,所以设置根节点的时候除15 (等同于15*50=750) 这样应该会提高性能吧~~

四.弹性盒模型 即flex布局

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
详细了解flex教程

Flex布局.png

举个栗子:

移动端淘宝布局.jpg

  <div class="wrap">
    <div><a href="javascript:;">天猫</a></div>
    <div><a href="javascript:;">聚划算</a></div>
    <div><a href="javascript:;">天猫国际</a></div>
    <div><a href="javascript:;">外卖</a></div>
    <div><a href="javascript:;">天猫超市</a></div>
    <div><a href="javascript:;">充值中心</a></div>
    <div><a href="javascript:;">飞猪旅行</a></div>
    <div><a href="javascript:;">领金币</a></div>
    <div><a href="javascript:;">充值中心</a></div>
    <div><a href="javascript:;">拍卖</a></div>
</div>

没有给"项目div"设置任何宽度高度,完全是图片撑起来的

示例.png

//示例css代码 利用伪类可以减少HTML代码的干预 一般还是习惯上img标签吧
.wrap{display:flex;display:-webkit-flex;flex-wrap:wrap;}
.wrap div{flex-grow:1;text-align: center;}
.wrap a{font-size:15/@a;display:block;}
.wrap a:before{content:"";display:block;width:150/@a;height:3rem;}
.wrap div:nth-child(1) a:before{background:url(../img/t1.png) no-repeat 0 center / 100%;}
.wrap div:nth-child(2) a:before{background:url(../img/t2.png) no-repeat 0 center / 100%;}
.wrap div:nth-child(3) a:before{background:url(../img/t3.png) no-repeat 0 center / 100%;}

如果是一排的话 flex-grow:1;可以直接平均分div

五.移动端事件

移动端三大事件:
手指按下: ontouchstart
手指移动: ontouchmove
手指离开: ontouchend
<small>注意: 在移动端开发的时候,浏览器的模拟器时好时坏,一般不用on的方式绑定事件函数,要用事件绑定的方式(addEventListener)</small>
<small>PC端的事件比移动端的事件略慢,大概在300ms左右</small>

移动端的点透: 当上层元素发生点击的时候,下层元素也有焦点特性,在300ms之后,如果上层元素消失或隐藏,目标点就会"漂移"到下层元素身上,就会触发点击行为.
解决:
<small>1.下层不要使用有点击(焦点)特性的元素
2.阻止PC事件</small>

document.addEventListener("touchstart",function(ev){
          ev.preventDefault();//阻止掉之后就尽量不要用PC端的事件了
})

• 禁止用户缩放meta设置在ios10不生效,就可以加上以上语句
• 解决ios10溢出隐藏的问题
• 精致系统默认的滚动条,阻止橡皮筋效果
• 禁止长按选中文字,选中图片,系统默认菜单
• 解决点透问题
• 也阻止了焦点行为(要正产更实用,ev.stopPropagation()阻止冒泡 )

<small>呼~~ 为什么我觉得它能阻止一切...</small>

移动端事件对象

当给某个元素加上了事件绑定函数之后，事件函数默认的第一个参数就是事件对象
事件对象：当用户在浏览器下触发了某个行为，事件对象会记录用户操作时一些细节信息。
touches 当前位于*屏幕*上的所有手指的一个列表
targetTouches 位于当前DOM元素上的手指的一个列表
changedTouches  涉及当前事件的手指的一个列表(正在滑动的手指)

六.Transform详解

div.style.WebkitTransform=div.style.transform="translate(100px)";

• transform-origin:center center;
• rotate(deg) 旋转
• skew(deg) 斜切 skewX skewY
• scale(num) 缩放(原来的多少倍)scala(x,y) scaleX scaleY
• translate(100px) 位移 px 写法同上

<small>

3d变换

perspective 景深(我在多元之外来看这个元素)加载要写在3d变换的父级

• transform-style 元素在做3d变换时,是否保留子元素的3d变换
• flat不保留
• preserve-3d保留子元素3d变换
• perspective-origin:center center;

</small>

//父级
-webkit-perspective: 200px;
perspective: 200px;
//元素上
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;