码迷,mamicode.com
首页 > 移动开发 > 详细

移动WEB前端开发资源整合

时间:2016-01-15 12:33:06      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:

meta相关:

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>

CSS相关:

   -webkit-overflow-scrolling:touch;快速滚动和回弹的效果,看上去和原生app的效率都有得一拼。-webkit-overflow-scrolling创建了带有硬件加速的系统级控件,所以效率很高。但是这相对是耗更多内存的,最好在产生了非常大面积的overflow时才应用。

 移动端字体

body {font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /*使用无衬线字体*/}

 禁止长按链接与图片弹出菜单

a, img { -webkit-touch-callout: none; }
防止点击高亮,可以通过给a标签或者body,html加 
-webkit-tap-highlight-color:transparent;

 -webkit-appearance属性,来改变任何元素的浏览器默认风格

appearance:none|normal|icon|window|button|menu|field;
去掉webkit默认的表单样式
button,input,optgroup,select,textarea {-webkit-appearance:none; }
禁止选中文本
-webkit-user-select: none;

 去掉a、input和button点击时的蓝色外边框和灰色半透明背景

a,button,input,optgroup,select,textarea {-webkit-tap-highlight-color:rgba(0,0,0,0); }

 修改input的planceholder样式

input::-webkit-input-placeholder {color:#ccc;}

 修改表单获取焦点时的样式

input[type=text]:focus, input[type=password]:focus { border: 2px solid#f00;outline: none;}

 用CSS实现省略号文字截断

white-space: nowrap;text-overflow: ellipsis;

移动WEB前端开发资源整合

标签:

原文地址:http://www.cnblogs.com/refe/p/5132804.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!