taro css 轉換 bug

https://nervjs.github.io/taro/docs/size.html

https://nervjs.github.io/taro/docs/component-style.html

Taro.pxTransform

css in js

https://nervjs.github.io/taro/docs/size.html#api

最佳實踐

1. 使用 css 的 class 設置樣式

2. 為每個組件分別指定 box-sizing 屬性

3. 使用正確的包裹容器，View

...

h5 to taro

1. span === Text
2. div === View

---

box-sizing: border-box;

no span, no *

以下全局公用樣式不會生效

@charset "UTF-8";

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

span, div{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

---

demos

1. box-sizing: border-box;

2. /*! autoprefixer: ignore next */

多行文本省略號 ...

.ticket-card-info{
  width: 242px;
  height: 32px;
  line-height: 16px;
  font-size: 11px;
  font-family:PingFang-SC-Regular,PingFang-SC;
  font-weight:400;
  color:#999999;
  display: block;
  margin-top: 8px;
  overflow: hidden;
  /* white-space: nowrap; */
  // 需要加上這一句autoprefixer的忽略規則 否則這一行樣式加不上 導致無法展示省略號
  /*! autoprefixer: ignore next */
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
   /*! autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  white-space: normal;
}

---