戳阅读原文--《APICloud开发者调查问卷》
请花五分钟填一下~
?移动端如何定义字体font-family
ios系统默认中文字体是HeitiSC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体
android系统
默认中文字体是Droidsansfallback
默认英文和数字字体是DroidSans
无微软雅黑字体
各个手机系统有自己的默认字体，且都不支持微软雅黑
如无特殊需求，手机端无需定义中文字体，使用系统默认
英文字体和数字字体可使用Helvetica，三种系统都支持
*移动端定义字体的代码*/body{font-family:Helvetica;}
?移动端字体单位font-size选择px还是rem
对于只需要适配手机设备，使用px即可
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备
rem配置参考：
html{font-size:10px}
mediascreenand(min-width:px)and(max-width:px){html{font-size:15px}}mediascreenand(min-width:px)and(max-width:px){html{font-size:0px}}mediascreenand(min-width:70px)and(max-width:px){html{font-size:.5px}}mediascreenand(min-width:px)and(max-width:px){html{font-size:3.5px}}mediascreenand(min-width:px)and(max-width:px){html{font-size:5px}}mediascreenand(min-width:px)and(max-width:px){html{font-size:30px}}mediascreenand(min-width:px){html{font-size:3px}}?移动端touch事件(区分webkit和winphone)
当用户手指放在移动设备在屏幕上滑动会触发的touch事件
以下支持webkit
touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
touchend——当手指离开屏幕时触发
touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用
以下支持winphone8
MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指
MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用css的html{-ms-touch-action:none;}可以阻止默认情况的发生：阻止页面滚动
MSPointerUp——当手指离开屏幕时触发
?移动端click屏幕产生00-ms的延迟响应
移动设备上的web网页是有ms延迟的，往往会造成按钮点击延迟甚至是点击失效。
解决方案：
fastclick可以解决在手机上点击事件的ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序
1、ontouchstart、ontouchmove3、ontouchend4、onclick
解决ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应
?什么是Retina显示屏，带来了什么问题
retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个
在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的倍
那么，前端的应对方案是：
设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/
//例如图片宽高为：00px*00px，那么写法如下.css{width:px;height:px;background-size:pxpx;}
其它元素的取值为原来的1/，例如视觉稿40px的字体，使用样式的写法为0px
.css{font-size:0px}
?ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
ios用户点击一个链接，会出现一个半透明灰色遮罩,如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0)}
?部分android系统中元素被点击时产生的边框怎么去掉
android用户点击一个链接，会出现一个边框或者半透明灰色遮罩,不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果
a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0)-webkit-user-modify:read-write-plaintext-only;}
-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
另外，有些机型去除不了，如小米
对于按钮类还有个办法，不使用a或者input标签，直接用div标签
?webkit表单元素的默认外观怎么重置
.css{-webkit-appearance:none;}
?webkit表单输入框placeholder的颜色值能改变么
input::-webkit-input-placeholder{color:#AAAAAA;}input:focus::-webkit-input-placeholder{color:#EEEEEE;}
?webkit表单输入框placeholder的文字能换行么ios可以，android不行~
?关闭iOS键盘首字母自动大写在iOS中，默认情况下键盘是开启首字母大写的功能的，如果启用这个功能，可以这样：
inputtype=”text”autocapitalize=”off”/
?关闭iOS输入自动修正和英文输入默认自动首字母大写那样，IOS还做了一个功能，默认输入法会开启自动修正输入内容，这样的话，用户经常要操作两次。如果不希望开启此功能，我们可以通过input标签属性来关闭掉：
inputtype=”text”autocorrect=”off”/
?禁止文本缩放当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：
html{ -webkit-text-size-adjust:%;}
需要注意的是，PC端的该属性已经被移除，该属性在移动端要生效，必须设置`metaviewport’。
?移动端如何清除输入框内阴影在iOS上，输入框默认有内部阴影，但无法使用box-shadow来清除，如果不需要阴影，可以这样关闭：
input,textarea{ border:0;/*方法1*/ -webkit-appearance:none;/*方法*/}
?移动端禁止选中内容如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：
.user-select-none{-webkit-user-select:none;/*Chromeall/Safariall*/-moz-user-select:none;/*Firefoxall（移动端不需要）*/-ms-user-select:none;/*IE10+*/}
?屏幕旋转的事件和样式事件
window.orientation，取值：正负90表示横屏模式、0和表现为竖屏模式；
window.onorientationchange=function(){switch(window.orientation){case-90:case90:alert(“横屏:”+window.orientation);case0:case:alert(“竖屏:”+window.orientation);break;}}
样式
//竖屏时使用的样式
mediaalland(orientation:portrait){.css{}}//横屏时使用的样式mediaalland(orientation:landscape){.css{}}?audio元素和video元素在ios和andriod中无法自动播放应对方案：触屏即播
$(‘html’).one(‘touchstart’,function(){audio.play()})
?消除transition闪屏.css{/*设置内嵌的元素在3D空间如何呈现：保留3D*/-webkit-transform-style:preserve-3d;/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/-webkit-backface-visibility:hidden;}
开启硬件加速
解决页面闪白
保证动画流畅
.css{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
设计高性能CSS3动画的几个要素
尽可能地使用合成属性transform和opacity来设计CSS3动画，
不使用position的left和top来定位
利用translate3D开启GPU加速
本文转自Yang年06月14日于爱七七五八网发表
别忘了，戳阅读原文，保证有链接
北京医院治疗白癜风北京哪治白癜风最好