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标签 100%;height: 100% 2.body标签 position: absolute 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 { 25px; height: 25px; background: url(../images/shop-icon.png); background-size: 50px 100px; background-position: 0 0; position: absolute; left: 8px; } .check_box[checked] { 25px; height: 25px; background: url(../images/shop-icon.png); background-size: 50px 100px; background-position: -20px 0; position: absolute; left: 8px; }
12.¥钱字符号
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};
}
}