布局和外观
各端描述 布局和外观
的层叠样式表(CSS)实现存在差异,包括不限于 布局
、盒模型
、定位
、文本
。
所以, cml
框架内置跨端一致性基础样式能力。
并且,定义了用于描述页面的样式规范CMSS(Chameleon Style Sheet)。
如何导入外部样式
使用 @import
语句可以导入外联样式表,@import
后跟需要导入的外联样式表的相对路径,用 ;
表示语句结束。
小程序导入外部样式
示例代码:
/** common.wxss **/
.small-p {
padding: 5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding: 15px;
}
cml 导入外部样式
示例代码:
/** common.css **/
.small-p {
padding: 5px;
}
<!-- app.cml -->
<style>
@import "./common.css";
.middle-p {
padding: 15 cpx;
}
</style>
样式使用总结
同时,为了统一多端尺寸单位,呈现效果一致,同时页面响应式布局,cml
项目统一采用 cpx 作为尺寸单位,规定以屏幕 750px(占满屏幕)视觉稿作为标准。
而且,各端样式表拥有的能力 不尽相同,是项目迁移的主要阵地之一。
另外,如果你想要使用某个端特定的样式能力,cml
并不会限制你的自由发挥,你可以从业务出发使用 样式多态
注意:由于 chameleon 应用是 跨多端web native 小程序
框架,如果需要跨native
,必须使用 flexbox 进行样式布局!!!