移动端开发笔记
一. 移动端基本环境
视口 基于设备坐标
- 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;
