经历了将近2个月的时间,宝贝详情的改造终于完成,已经在前段时间上线了,接下来总结一下在项目过程中前端的一些实现。
提示:css3的属性目前浏览器都只要加私有前缀才能支持(如firefox:-moz,chrome & safari & android & ios:-webkit,opera:-o等)
元素宽度自适应
之前做pc端的时候写过一篇宽度自适应的文章
完美实现两个div并排且宽度为50%,不足的是不灵活,如果一行元素由3个变成2个,为了改变样式就需要一定的判断了。现在有了display:box,一切就变得简单了。
parent {display : box;}
children {box-flex : 1;}
children {box-flex : 1;}
*需要自适应的子元素必须是display:block or box,否则无效
*若需子元素间保持宽度一致,需设置width:100%
*若需子元素间保持宽度一致,需设置width:100%
单行文本溢出显示...
element{text-overflow : ellipsis;white-space : nowrap;overflow : hidden;}
多行文本溢出显示…
element{-webkit-line-clamp : 2;box-orient : vertical;}
*元素必须是display:box,否则无效
文字水平垂直居中
element{box-pack : center;box-align : center;}
*元素必须是display:box,否则无效
图片水平垂直居中
一开始我认为通过设置display:table-cell,加上vertical-align:middle就可以解决垂直居中的问题,但是后来发现改变了display后会影响到本身的布局了,所以推荐下面这种方式。
img vertical-align : middle;
parent : after{
content : " ";
visibility : hidden;
display : inline-block;
height : 100%;
vertical-align : middle;
}
parent : after{
content : " ";
visibility : hidden;
display : inline-block;
height : 100%;
vertical-align : middle;
}
手机上的点击反馈
去掉浏览器默认的反馈,-webkit-tap-highlight-color : rgba(0,0,0,0);
*不需要点击反馈,不用a标签(UC下问题);
*使用了delegate,建议使用a或者button;
*ipad下必须设置在绑定事件的元素上。
*不需要点击反馈,不用a标签(UC下问题);
*使用了delegate,建议使用a或者button;
*ipad下必须设置在绑定事件的元素上。
transform闪动问题
parent {-webkit-backface-visibility : hidden;}
children {-webkit-transform-style : preserve-3d;}
children {-webkit-transform-style : preserve-3d;}
*android下会出现一些问题(click失效、input重影等);
*可使用-webkit-transform : translate3d(0,0,0)替代。
*可使用-webkit-transform : translate3d(0,0,0)替代。
本文转自:http://www.caoren.net/article/?id=44