一致性基础样式

通常情况下，H5、小程序、客户端拥有各自的默认样式，各端呈现效果不一。所以，cml框架会给各端添加一致性基础样式。

基础样式包括以下方面：

类型默认值
布局 display: flex; flex-direction: column;
盒模型box-sizing: border-box;
定位position: relative;
文本 display: block; font-size: 16px; white-space: pre-wrap;

针对H5端添加的基础样式如下

  1. .cml-root {
  2.     width: 100%;
  3.     overflow-x: hidden;
  4.     -webkit-tap-highlight-color: transparent;
  5.     font-family: BlinkMacSystemFont, 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  6. }
  8. .cml-base {
  9.     text-align: left;
  10.     font-size: 0.4rem; /*15px*/
  11.     letter-spacing: 0.02rem;
  12. }
  14. .cml-base,
  15. .cml-base::before,
  16. .cml-base::after {
  17.     box-sizing: border-box;
  18.     text-size-adjust: none;
  19. }
  21. .cml-view {
  22.     display: flex;
  23.     box-sizing: border-box;
  24.     position: relative;
  25.     flex-direction: column;
  26.     flex-shrink: 0;
  27.     flex-grow: 0;
  28.     flex-basis: auto;
  29.     align-items: stretch;
  30.     align-content: flex-start;
  31.     border: 0 solid black;
  32.     margin: 0;
  33.     padding: 0;
  34.     min-width: 0;
  35. }
  37. .cml-text {
  38.     display: block;
  39.     box-sizing: border-box;
  40.     position: relative;
  41.     white-space: pre-wrap;  /* not using 'pre': support auto line feed. */
  42.     word-wrap: break-word;
  43.     overflow: hidden; /* it'll be clipped if the height is not high enough. */
  45.     flex-shrink: 0;
  46.     flex-grow: 0;
  47.     flex-basis: auto;
  48.     border: 0 solid black;
  49.     margin: 0;
  50.     padding: 0;
  51.     min-width: 0;
  52. }

针对小程序添加的基础样式如下：

  1. .cml-base {
  2.     text-align: left;
  3.     font-size: 32rpx;
  4.     letter-spacing: 1rpx;
  5.     font-family: BlinkMacSystemFont, 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  6. }
  8. .cml-base,
  9. .cml-base::before,
  10. .cml-base::after {
  11.     box-sizing: border-box;
  12.     text-size-adjust: none;
  13. }
  14. .cml-view {
  15.     display: flex;
  16.     box-sizing: border-box;
  17.     position: relative;
  18.     flex-direction: column;
  19.     flex-shrink: 0;
  20.     flex-grow: 0;
  21.     flex-basis: auto;
  22.     align-items: stretch;
  23.     align-content: flex-start;
  24.     border: 0 solid black;
  25.     margin: 0;
  26.     padding: 0;
  27.     min-width: 0;
  28. }
  30. .cml-text {
  31.     display: block;
  32.     box-sizing: border-box;
  33.     position: relative;
  34.     white-space: pre-wrap;  /* not using 'pre': support auto line feed. 保留空白符序列，但是正常地进行换行 */
  35.     word-wrap: break-word; /* 在长单词或 URL 地址内部进行换行。 */
  36.     overflow: hidden; /* it'll be clipped if the height is not high enough. */
  38.     flex-shrink: 0;
  39.     flex-grow: 0;
  40.     flex-basis: auto;
  41.     border: 0 solid black;
  42.     margin: 0;
  43.     padding: 0;
  44.     min-width: 0;
  45. }

说明如下：

class名代表含义
.cml-rootH5端 app 根节点
.cml-base任一节点
.cml-viewview元素
.cml-texttext元素