1. 单位
-
rem
相对于根元素
html{
/* 1 rem */
font-size: 16px;
}
div{
/* 20*16px */
width: 20rem;
/* 20*16px */
height: 20rem;
}
-
em
字体相对于根元素计算，其他元素相对于当前元素
html{
/* 1 rem */
font-size: 16px;
}
div{
font-size: 18px;
/* 20*18px */
width: 20em;
/* 20*18px */
height: 20em;
}
2. 事件
1. click
- 类似于PC端的click，但在移动端中，连续click的触发有约300ms的延迟
2. touch
touchstart触摸touchmove移动touchend离开touchcancel系统停止跟踪触摸时（打断）
3. tap
tap点击一下longTap长按singleTap碰一下doubleTap双击
4. swipe
swipe滑动swipeLeft向左滑动swipeRight向右滑动swipeUp向上滑动swipeDown向下滑动
3. 移动端兼容性问题
1. 设计稿2倍图 实现绝对1px的边框（0.5px）安卓系统 ios7以下不⽀持0.5px
- 缩放、写1px的阴影
<!--css-->
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 2rem;
height: 2rem;
position: relative;
}
button{
width: .5rem;
height: .3rem;
position: absolute;
z-index: 2;
}
div::before{
content: '';
display: block;
width: 200%;
height: 200%;
top: 0;
left: 0;
border: 1px solid #eeeeee;
-webkit-transform: scale(0.5);
transform: scale(0.5);
transform-origin: 0,0
position: absolute;
z-index: 1;
}
</style>
<!--html-->
<body>
<div>
<button>点击</button>
</div>
</body>
<!--js-->
<script>
var Obtn = document.getElementsByTagName("button")[0];
Obtn.onclick = function(){
alert("hello world");
}
</script>
2. 低版本安卓⼿机不⽀持背景⾊渐变， 在单独写⼀个背景⾊
background-color:#ff7e33;
background-image:linear-gradient(45deg,#ff5303,#ff9143);
3. 低版本⼿机 尤其是4.+系统的不支持es6写法
vconsole会报错script error ，但无法查出具体错误 需要加垫片babel-polyfill
4.点击输⼊框拉起键盘 输⼊完成后 会发现⻚⾯⾼度⽆法被撑开
（安卓手机会出现） 重新获取⻚⾯高度并赋值
5. 图⽚上传，不同⼿机的input file展现形式不同
ios系统⼀般会出现拍照和相册两个选项，安卓手机拍照、相册选择有时只出现⼀ 项，有时根据系统不同会展示其他项，12306的webview不⽀持input file 会出现闪退的情况
6.ios 11系统input光标错位（系统本身原因）
7.页面滑动吸顶或吸底效果，手机qq的webview里无法拉动
需要阻止页面的默认动作
8.ios系统的input框会有⼀个隐形 需要去掉
-webkit-appearance: none;
9.有的⼿机input placeholder⽆法垂直居中
可以设置input高度小⼀点 然后上下加padding
网上的解决方式line-height：normal
