淘宝触屏版宝贝详情改造（一）

2024-05-17 18:28:02

经历了将近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;}

*需要自适应的子元素必须是display:block or box，否则无效
*若需子元素间保持宽度一致，需设置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;
    }

手机上的点击反馈

去掉浏览器默认的反馈，-webkit-tap-highlight-color : rgba(0,0,0,0);
    *不需要点击反馈，不用a标签(UC下问题)；
    *使用了delegate，建议使用a或者button；
    *ipad下必须设置在绑定事件的元素上。

transform闪动问题

parent {-webkit-backface-visibility : hidden;}
children {-webkit-transform-style : preserve-3d;}

*android下会出现一些问题（click失效、input重影等）；
*可使用-webkit-transform : translate3d(0,0,0)替代。

本文转自：http://www.caoren.net/article/?id=44

淘宝触屏版宝贝详情改造（一）相关推荐

淘宝触屏版适配代码，趴下来以后写移动端页面的时候可以参考下
顺便说几个属性: 1.window.devicePixelRatio 它的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素.css ...
Swiper的API及自定义分页器等问题-淘宝触屏版首页制作
移动端页面制作的一些基础问题: 1.使用百分比,vw等相对单位,行高vw无效: 2.学会使用border-box,可以有效避免因为计算不精确,导致出现横向滚动条: 3.媒体查询可以帮助更细致的微调不同 ...
flexbox的学习，display：flex display：box 淘宝触屏版、饿了么网布局分析分析
Flex 布局教程:语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 父: display:flex: 父属性设置 flex-d ...
淘宝卖家如何通过宝贝详情页装修提高店铺转化？
开网店,淘宝卖家们最清楚不过了,每天的操作都是围绕着流量和转化这两个核心问题.想要提高店铺的转化率,技巧有很多,今天主要说说怎样通过宝贝详情页装修来提高店铺转化率.下面就来给大家说说宝贝详情页装修具体 ...
淘宝、天猫API宝贝详情API接口，shop字段、sku字段详细展示
以下是行业内了解到的一些情况,本帖只展示部分代码,需要更多API调试请移步注册API账号 http://console.open.onebound.cn/console/?i=Rookie { &qu ...
淘宝触屏主页面菜单
效果图 [img]http://dl2.iteye.com/upload/attachment/0090/8722/f096078d-459a-3384-a3c8-1590368093ac.png[/ ...
淘宝网触屏版 - 学习笔记（1 - 关于meta）
注:本文是学习笔记,并不是教程,所以会有很多我不理解或猜测的问题,也会有不尽详实之处,望见谅. <meta charset="utf-8"> <meta cont ...
淘宝网触屏版 - 学习笔记（0 - 关于dpr）
注:本文是学习笔记,并不是教程,所以会有很多我不理解或猜测的问题,也会有不尽详实之处,望见谅. 对于pc端网页设计师来说,移动端的网页制作,我之前只是简单的加了一个 <meta name=&qu ...
淘宝标签单法做好这6步，帮你快速上淘宝首页，提升宝贝流量
我们淘宝店铺里的宝贝,都有自己的标签.这个标签就是顾客找到宝贝的入口,可以说标签是流量来源的核心.总之,宝贝标签打得好,流量自然不会差!那么我们如何给宝贝做好标签呢?答案就是"刷" ...

最新文章

热门文章