移动web开发经验

1. font-family: "Microsoft YaHei",sans-serif;/*第二个是手机的一个默认的字体 手机没有微软雅黑*/

2.主流手机浏览器内核都为webkit

3.*{-webkit-tap-highlight-color: transparent;}/*清除点击默认的高亮效果*/

4.input,textarea{

border: none;
resize: none;
outline: none;/*清除选中效果*/

-webkit-appearance: none;/*清楚浏览器默认的样式*/
}

5.搜索框使用input type=“search”而不使用type=“text”这样可以调出手机的键盘

<form action="" class="jd_search">
    <input type="search" placeholder="搜索">
</form>

6.对于有相似样式的盒子，可以先定义一个公共类来表示相同的样式，然后再用另外一个类来表示不同的样式

7.满屏显示: 1.html标签 width:100%;height: 100%     2.body标签 position: absolute width: 100% height: 100%

8.用<input type="tel">可以直接调出手机的数字键盘

9.进行移动web开发一定要加这句，content里为逗号

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"/>

10.当文字不能完全显示时出现省略号  详见http://www.tuicool.com/articles/MB3amay

设置高度大于行高的好处是文字换行时，下面的元素不受影响

10.1单行显示省略号

text-overflow: ellipsis 必须结合overflow:hidden,white-space:no-wrap

10.2多行文字在最后一行显示省略号

.jd_shop .jd_shop_product .product_info .info .name{
line-height: 15px;
height: 30px;
text-overflow: ellipsis;/*单行文本省略号*/
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}

11.加上checked属性就自动变换

<div class="check_box " checked></div>

/*公用的选择图标*.check_box {
    width: 25px;
    height: 25px;
    background: url(../images/shop-icon.png);
    background-size: 50px 100px;
    background-position: 0 0;
    position: absolute;
    left: 8px;
}
.check_box[checked] {
    width: 25px;
    height: 25px;
    background: url(../images/shop-icon.png);
    background-size: 50px 100px;
    background-position: -20px 0;
    position: absolute;
    left: 8px;
}

12.&yen;钱字符号

13.scroll函数兼容写法

function scroll() {
if(window.pageYOffset!=null){
return {top:window.pageYOffset,left:window.pageXOffset};
}
else if(document.compatMode == "CSS1Compat"){
return {top: document.documentElement.scrollTop,left: document.documentElement.scrollLeft};

}
else {
return {top:document.body.scrollTop,left:document.body.scrollLeft};
}
}