xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

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{
   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;
}

---