rem布局及其插件

尚妆新页面rem方案文档

  1. flexible.js已全局使用,无需再引用。
  2. 新页面vm头部设置变量#set($isRem=true)
  3. 组件抽离使用rem布局。

rem布局规范

说明

0.1.10版本的spon添加了rem插件,该插件作用可以让rem的大小自适应。rem插件必须与flexible.js文件匹配(http://cdn1.showjoy.com/assets/f2e/joyf2e/vendor/0.0.22/flexible/flexible-min.js)。

目前公司使用的flexible是将设计稿插件针对的750px的设计稿,因此,在设计稿上一个banner的宽度是750px,可以在less中这样定义: .banner{ width: 750px; font-size: 16px; } 这样,使用spon mb rem之后,会计算成 .banner{ width: 10rem; font-size: 16px; } 当然,现实情况中不会有这么简单的情况,举个例子: 设计师往往给我们视觉稿中有1px的边框要求,如果还是简单的采用rem放缩,那么肯定最终在终端的呈现效果很有可能不是1px。那么,如何避免呢?有些同学可能有了解决方案,如高分屏下设置0.5px,或者使用tramsform进行scale缩小,但这都是基于px为前提的。因此我们需要针对某些属性放弃使用rem变换,当然也有可能需要我们手动添加某些属性使用rem变换,这取决于项目的具体需求。

目前,spon工具默认针对以下css属性做rem判断:

'font','font-size','line-height',  
 'letter-spacing','text-indent',
'word-spacing','width','height',  
'max-height','max-width','min-height',  
'min-width','left','top','right',  
'bottom','margin','margin-left',  
'margin-top','margin-right',  
'margin-bottom','padding','padding-left',  
'padding-top','padding-right',  
'padding-bottom','background',  
'background-position',  
'vertical-align'  

如果想针对某个属性放弃使用rem变换,spon已实现黑名单机制。另外,我们可以在对应的页面less中的头部添加(默认新创建的页面中会携带徒步)其他相关配置:

{{name}}.less内容
-----------------------
/*
  @remSwitch: false;
  @rootValue: 75;
  @unitPrecision: 4;
  @blackList: ["font","font-size"];
  @minPixelValue: 2;
*/

/* 导入全局方法 */
@import "../../mixins/mixins.less";

.spon-test {
  background: red;
  border: 1px;
  width: 100px;
  font-size: 20px;
}

其中

  • remSwitch为rem转换的开关,默认开启rem转换,设置为false则不使用rem转换
  • rootValue为设置的页面大小基准,默认75对应于当前设计稿的750px的宽度,正常不需要改动
  • unitPrecision为转换为rem单位是的小数点精度。默认为后四位
  • blackList则是为黑名单,默认为空。黑名单中的属性不会进行rem转换
  • minPixelValue则是最小的非转换大小,默认为2,即小于2px的大小不会进行rem转换,所有当前配置下1px的长度不会转换。

在less中,如要针对特定的属性不需要进行转换可添加对应注释/@norem/

.abc{
    width: 650px/*@norem*/;
    border: 1px;
    border-radius: 40px;
    font-size: 16px;
  }
--->rem变换
.abc {
  width: 650px /*@norem*/;
  border: 1px;
  border-radius: 1.0667rem;
  font-size: 16px;
}

目前rem转换默认集成在dev、build和join操作中,欢迎使用。

欲休

继续阅读此作者的更多文章

海创园尚妆