背景

并不是大厂写的样式就不会存在问题，他们也不会考量过多的细节，这个在淘宝的移动端样式中我们如果一定要查问题也是能查出很多来的。

本着严谨的态度，我会分享出我认为可以怎么做，当然这不一定对，只是说明在某些角度，如果你的ui设计师或者产品再跟你较真的时候，可以为自己保留一点话语权，有些细节不是特别重要，尤其像素眼的一些设计师朋友。

视觉偏差，和视觉误差是两回事，有些样式在不同浏览器上实现的效果肯定是有差异的，在前端按照比较规范的方式实现之后，还是在部分机型上有显示问题，是允许的。

本文所参考的移动端站点，https://main.m.taobao.com/

问题列表

固定位置

移动端的固定位置一直是不被建议的，但站点中90%以上的部分都用的固定位置，因此如果因为这个导致的相关问题，可以一定角度忽略。

  1. .cwuuUs {
  2.     position: fixed;
  3.     left: 0px;
  4.     top: 0px;
  5.     z-index: 1000;
  6.     width: 100%;
  7.     background-color: rgb(255, 133, 42);
  8. }

多行省略号

大多产品都会要求文字过多时，展示省略号，然后文字不够时，不留白，但实际上在其对应的界面发现这两种效果都是没有的。

在商品列表的名称上，其按照固定两行显示的，然后在显示两行上，也并没有设置过多的样式，超出直接是不可见的。在其内部写了一个子元素，可以显示全部内容。

  1. .recommend-title {
  2.     margin-top: 11.499999999999998px;
  3.     height: 37px;
  4.     position: relative;
  5.     overflow: hidden;
  6.     line-height: 18.5px;
  7.     text-overflow: ellipsis;
  8.     min-height: 0;
  9. }

其评价内容也是直接按照两行固定显示的，没有灵活判断内容多少，当文本包括数字或者英文时，也没有考虑单词换行。

image.png

  1. .rate-plist-content {
  2.     display: -webkit-box;
  3.     margin-top: 1.6vw;
  4.     height: 9.6vw;
  5.     font-size: 3.2vw;
  6.     color: #333;
  7.     line-height: 4.8vw;
  8.     overflow: hidden;
  9.     text-overflow: ellipsis;
  10.     -webkit-box-orient: vertical;
  11.     -webkit-line-clamp: 2;
  12. }

我们认为的要垂直居中的

image.png

实际代码，父元素只用了简单的行高，图片与文本只是写了字号大小。

  1. .desc .desc-title {
  2.     margin: 2.8vw 0;
  3.     font-size: 3.2vw;
  4.     line-height: 1.25;
  5.     text-align: center;
  6.     color: #939393;
  7. }

另外的需要垂直居中的，也只是用了弹性盒的align-items:center ，没有写额外的样式纠正。

image.png

  1. .shop-wrapper .shop-content-wrapper, .shop-wrapper .shop-content-wrapper .shop-content-item {
  2.     display: -webkit-box;
  3.     display: -webkit-flex;
  4.     display: -moz-box;
  5.     display: flex;
  6.     -webkit-box-align: center;
  7.     -webkit-align-items: center;
  8.     -moz-box-align: center;
  9.     align-items: center;
  10. }

上下元素间距一般只设计行高，不另外设置向上间距

image.png

image.png

图片比例适配

设计的显示尺寸多半是和原图尺寸不符合的，在样式新出了相应的原图适配样式，除此之外也没有额外设置。

image.pngimage.png

  1. .recommend .recommend-wrapper .recommend-item .recommend-item-img-wrapper img {
  2.     display: block;
  3.     width: 100%;
  4.     height: 100%;
  5.     -moz-border-radius: 1.86667vw 1.86667vw 0 0;
  6.     border-radius: 1.86667vw 1.8666vw 0 0;
  7.     -o-object-fit: contain;
  8.     object-fit: contain;
  9. }

左边为适配之后的效果。

在另一个商品列表，为了保证显示效果的友好，其要保证后台的图片比例正常，如果没有，淘宝会针对原图做相应比例的裁剪图。

文字超出限定长度无法显示

image.png

文案没有显示完整，也许我们修改后的文案是不符合之前的文本处理标准，但显然这种显示结果是异常的。