目前天猫精灵小程序使用的 ACSS 和 CSS 规则完全一致，100% 可以用。同时为更适合开发小程序，对 CSS 进行了扩充。
ACSS 支持 px，rpx，vh，vw 等单位。

关于这几个单位解释

rpx

以iPhone6 的屏幕宽度(也就是750个像素点)为基准,在竖直手机上进行适配的一个原则。
对于这个我个人理解是这样的, rpx（responsive pixel）也是根据屏幕宽度进行自适应，规定屏幕宽为 750rpx。~~
在有设计稿的情况下,使用rpx转换会非常方便。(但是因为历史原因,目前天猫精灵上的rpx 并没有修改为天猫精灵屏幕宽度为基准,所以换算也是很麻烦)

px

目前PX在天猫精灵的展示和天猫精灵实际分辨率一致。
可以通过下面这个方法获取,这种方案可行,但在实际使用中这个是一个异步的结果,所以天猫精灵不能让你一开始就获取到屏幕的分辨率。
注: 请使用screenHeight,screenWidth这两值作为适配标准(因为10寸屏上的windowHeight 和windowWidth并不准确)

  1. getSystemInfo: function () {
  2.     my.getSystemInfo({
  3.       success: (res) => {
  4.         this.printConsoleInfo("getSystemInfo   " + JSON.stringify(res));
  5.       }
  6.     })
  7.   },

vh，vw

这是一个不需要JS和CSS耦合在一起的单位(而且支持小数比如1.5)
1vw = 视口宽度的1%
1vh = 视口高度的1%

%(百分比)

当然小程序也支持这种方式(和上面你的方案是一致)

下面是所有方案实现占用一般屏幕的代码示例

  1.  page {
  2.   flex: 1;
  3.   display: flex;
  4.   background: #f7f7f7;
  5.   width:50%;
  6.   width:50vw;
  7.   width:512px;(7寸) /640px;(10寸) 
  8.   width:375rpx;
  9. }

screenshot_200512112818.png
7寸屏幕效果
2020-05-12_14_29_17.077_G6583D8A06A3F8F6960B549A9E52FBD78.png
10寸屏幕

如何适配天猫精灵7(1024600)/10(1280800)寸屏幕

目前天猫精灵小程序应用体验是靠近移动端平板设备.有别于前端在浏览器的适配.这点在适配中需要特别注意.
现阶段天猫精灵发布的两个尺寸的带屏产品分辨率都接近16/9.所以理论上按照百分比的一个布局方式基本都能以一个很好的适应方式.
个人这边推荐 Flex +vw 为主的一个适配思路.
当然在有设计稿的情况下,使用rpx可能会是一个更好的方案,因为比例换算方便.(不过这两个方案思路一致)

1.对于可以滚动的流式布局,以宽为基准,竖直超出屏幕的部分,可以做一个滚动处理.
2.对于屏幕图片的部分,主要要做防止拉伸处理,在已知图片比例的情况可以使用width:20vw;height:15vw;
3.对于无法滚动的页面,那么这边推荐使用vh的方案, 这样适当的释放屏幕的宽度,来展现一个良好的使用效果

注:
app.acss 作为全局样式，作用于当前小程序的所有页面。

参考文档

  1. ACSS 语法参考(https://opendocs.alipay.com/mini/framework/acss)

    2.关于屏幕适配的个人见解(https://juejin.im/post/5d21a9bd5188255360190e7e)
    3.vh,vw单位你知道多少？(https://juejin.im/entry/59b00e46f265da2491513bcc)