一些移动端会用到的实战

---恢复内容开始---

移动端

　　

a标签点击变背景蓝色问题  -webkit-tap-highlight-color: #transparent;

　使 i 标签和文字对齐  1：margin-bottom　　2：使用盒子模型box-sizing:border-box 用vertical-align调整（还有一种情况就是  font-size 文字和i图标大小不一致,目前没有找到办法调整,只能设置成一样）

/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
八种方法处理CSS浮动问题　http://blog.csdn.net/u010139093/article/details/28385545

设置高度，2行，超出部分省略号

　　overflow: hidden;
　　text-overflow: ellipsis;
　　display: -webkit-box;
　　-webkit-line-clamp: 2;
　　-webkit-box-orient: vertical;

 

 

手机显示又白边（html固定px）

按照比例进行缩放，横向可移动，需在容器body 加一个 overflow:hidden属性

 

安卓系统 呼出键盘遮罩

1  设计上的问题；http://my.oschina.net/cjlice/blog/625526 

2  进行判断http://caibaojian.com/browser-ios-or-android.html

　　然后input fouse上浮，click清除错误样式

http://www.w3dev.cn/article/20150617/javascript-check-android-keyboard-show-hide.aspx

我还没测试这个， 这篇看起来也不错

清除input的输入内容： 看这个顺序；

　

var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
var mobile = $("#contactMobile").val();

if(!myreg.test(mobile)){
    $("#contactMobile").val("");
    $("#contactMobile").attr({placeholder:"请输入有效的手机号码"});
    $("#contactMobile ").focus();
    $("#contactMobile ").addClass("active");
    return;
 }

<input type="number" name="quantity" min="1" max="5">

颜色转换为 rgba;

http://www.atool.org/colorpicker.php

背景

background: rgba(0,0,0,0.3);

---恢复内容结束---

---恢复内容结束---