taro之--设计稿以及尺寸单位

Posted 2023-04-04 瞬间的醒悟

设计稿及尺寸单位

在 Taro 中尺寸单位建议使用 px、 百分比 %，Taro 默认会对所有单位进行转换。在 Taro 中书写尺寸按照 1:1 的关系来进行书写，即从设计稿上量的长度 100px，那么尺寸书写就是 100px，当转成微信小程序的时候，尺寸将默认转换为 100rpx，当转成 H5 时将默认转换为以 rem 为单位的值。

如果你希望部分 px 单位不被转换成 rpx 或者 rem ，最简单的做法就是在 px 单位中增加一个大写字母，例如 Px 或者 PX 这样，则会被转换插件忽略。

结合过往的开发经验，Taro 默认以 750px 作为换算尺寸标准，如果设计稿不是以 750px 为标准，则需要在项目配置 config/index.js 中进行设置，例如设计稿尺寸是 640px，则需要修改项目配置 config/index.js 中的 designWidth 配置为 640：

/config/index.js

const config = 
  projectName: 'myProject',
  date: '2018-4-18',
  designWidth: 640,
  ....

目前 Taro 支持 750、 640 、 828 三种尺寸设计稿，他们的换算规则如下：

const DEVICE_RATIO = 
  640: 2.34 / 2,
  750: 1,
  828: 1.81 / 2,

建议使用 Taro 时，设计稿以 iPhone 6 750px 作为设计尺寸标准。

如果你的设计稿是 375 ，不在以上三种之中，那么你需要把 designWidth 配置为 375，同时在 DEVICE_RATIO 中添加换算规则如下：

const DEVICE_RATIO = 
  640: 2.34 / 2,
  750: 1,
  828: 1.81 / 2,
  375: 2 / 1,

信息

Taro v3.4.13 开始支持配置函数形式的 designWidth，借此开发者可以动态地设置 designWidth，详情请查看：config.designWidth

API​

在编译时，Taro 会帮你对样式做尺寸转换操作，但是如果是在 JS 中书写了行内样式，那么编译时就无法做替换了，针对这种情况，Taro 提供了 API Taro.pxTransform 来做运行时的尺寸转换。

Taro.pxTransform(10) // 小程序：rpx，H5：rem

配置​

默认配置​

默认配置会对所有的 px 单位进行转换，有大写字母的 Px 或 PX 则会被忽略。

postcss.pxtransform 的参数默认值如下：

config/index.js

config = 
  mini: 
    postcss: 
      pxtransform: 
        enable: true,
        config: 
          onePxTransform: true,
          unitPrecision: 5,
          propList: ['*'],
          selectorBlackList: [],
          replace: true,
          mediaQuery: false,
          minPixelValue: 0
        
      
    
  
  h5: 
    postcss: 
      pxtransform: 
        enable: true,
        config: 
          onePxTransform: true,
          unitPrecision: 5,
          propList: ['*'],
          selectorBlackList: [],
          replace: true,
          mediaQuery: false,
          minPixelValue: 0,
          baseFontSize: 20,
          maxRootSize: 40,
          minRootSize: 20
        
      
    
  

onePxTransform (Boolean)​

设置 1px 是否需要被转换

unitPrecision (Number)​

REM 单位允许的小数位。

propList (Array)​

允许转换的属性。

• Values need to be exact matches.
• Use wildcard * to enable all properties. Example: ['*']
• Use * at the start or end of a word. (['*position*'] will match background-position-y)
• Use ! to not match a property. Example: ['*', '!letter-spacing']
• Combine the "not" prefix with the other prefixes. Example: ['*', '!font*']

selectorBlackList​

黑名单里的选择器将会被忽略。

• If value is string, it checks to see if selector contains the string.
  • ['body'] will match .body-class
• If value is regexp, it checks to see if the selector matches the regexp.
  • [/^body$/] will match body but not .body

replace (Boolean)​

直接替换而不是追加一条进行覆盖。

mediaQuery (Boolean)​

允许媒体查询里的 px 单位转换

minPixelValue (Number)​

设置一个可被转换的最小 px 值

配置规则对应到 config/index.js ，例如：

/config/index.js

  h5: 
    publicPath: '/',
    staticDirectory: 'static',
    postcss: 
      autoprefixer: 
        enable: true
      ,
      pxtransform: 
        enable: true,
        config: 
          selectorBlackList: ['body']
        
      
    
  ,
  mini: 
    // ...
    postcss: 
      pxtransform: 
        enable: true,
        config: 
          selectorBlackList: ['body']
        
      
    
  

baseFontSize (Number, H5 Only, Default: 20)​

H5 字体尺寸大小基准值，开发者可以自行调整单位换算的基准值。

maxRootSize (Number, H5 Only, Default: 40)​

H5 根节点 font-size 的最大值。

minRootSize (Number, H5 Only, Default: 20)​

H5 根节点 font-size 的最小值。

CSS 编译时忽略（过滤）​

忽略单个属性​

当前忽略单个属性的最简单的方法，就是 px 单位使用大写字母。

/* `px` is converted to `rem` */
.convert 
  font-size: 16px; // converted to 1rem


/* `Px` or `PX` is ignored by `postcss-pxtorem` but still accepted by browsers */
.ignore 
  border: 1px solid; // ignored
  border-width: 2px; // ignored

忽略样式文件​

对于头部包含注释 /*postcss-pxtransform disable*/ 的文件，插件不予处理。

忽略样式举例​

样式文件里多行文本省略时我们一般如下面的代码：

.textHide 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;

但 Taro 编译后少了 -webkit-box-orient: vertical; 这条样式属性，此时我们需要忽略掉这条样式

忽略样式方法 1 加入 CSS 注释强制声明忽略下一行​

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

忽略样式方法 2 加入 CSS 注释强制声明注释中间多行​

/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

忽略样式方法 3 写成行内样式​

<View
  style=
    display: '-webkit-box',
    '-webkit-box-orient': 'vertical',
    '-webkit-line-clamp': 2,
    'text-overflow': 'ellipsis',
    overflow: 'hidden',
    'line-height': 2
  
>
  这是要省略的内容这是要省略的内容这是要省略的内容
</View>

移动开发之设计稿转换页面单位尺寸

在写这篇文章之前，我询问了在唯品会和腾讯的童鞋、以及公司里面前端大神（深哥），对于设计稿切图的详细方法，经过对比验证，得出设计稿转换页面单位尺寸方法步骤。我分别询问下面四个问题：

1. 设计稿的单位是什么，一般大小是什么？

2. 页面长度单位用什么，px、em、rem，还是混合，如果用rem，html的font-size是多少？

3. 设计稿转换成页面长度的方法？

4. 如果做媒体查询，合适的区间是什么？

PS：他们都已设置viewport

Q&A

--朱姐（腾讯）回答

1. 设计稿的单位是px，一般是750px。

2. px、rem混合着用，rem的html font-size用16px。

3. 750px的设计图以375px量长宽，例如设计图里有元素宽度是100px，那么得到宽度会是 100px/2/16px = 3.125rem。

4. 根据设备宽度不同，设置不同的html 的font-size，这个区间并没说明。

--滨神（唯品会）回答

1. 设计稿的单位是px，一般是 750px。

2. 限制用rem，rem的html font-size用312.5%（由于默认字体大小是16px，所以最终是16px * 312.5% = 50px）。

3. 750px的设计图以375px量长宽，例如设计图里有元素宽度是100px，那么得到宽度会是 100px/2/50px = 1rem。

4. 如果设置固定html font-size，那么就需要弄媒体查询；如果按不同设备宽度算出各自的font-size，就不用弄媒体查询。

--深哥（公司大神）回答

1. 设计稿的单位是px，一般是1080px。

2. 建议是全部使用rem及百分比的方式，rem的html font-size用100px。

3. 1080px的设计图以540px量长宽，例如设计图里有元素宽度是100px，那么得到宽度会是 100px/2/100px = 0.5rem。

4. 按不同设备宽度算出各自的font-size，如果需要兼容特殊设备（例如iPad），才要做媒体查询。如果在iPad上的效果偏大，就要修改小一点字体，一般是76px，就可以跟手机差不多保持一致的效果了。

--得出结论

1. 设计稿的单位是px（PhotoShop出来当然是这个）。

2. 没人页面长度用em。

3. 元素长宽量取是设计图里的1/2。

这三个结论还并不能得出一个好的方案。

假设

为了简化问题，做一个假设，假如世界上只有一种手机型号（恰好是iPhone6），那设计稿转换的方式是怎么样的？

（1）. 有张750px的设计稿，iPhone6的设备宽度375，取375为量取大小。

（2）. 那么设计稿里面100px，在iPhone6显示为100px / (750 /375 ) = 50px。

（3）. 规定一个html font-size值 X（例如50px），那rem值就是 (50/X) rem （例如 50px/ 50px = 1rem）

这里面可以很明显看到，font-size值并没有规定要用哪个值，它只是一个基数，元素的像素大小并不会因为这个基数有变化（所以上面问了三个人有三个不同的值，这没问题的）。也由于我们以375量取大小，所以在iPhone6上效果是与设计稿一致的。另外不是rem也是可以的（第三步不做），直接用px， 更加简单。

假设破灭

世界上当然有很多乱七八糟的机型，那如何在上面的基础上做适配？

（1）. 假如用的是px单位，又不做媒体查询做适配。那么可能在某些机型上偏大偏小，但是还能用。之所以可以这么干，是因为手机的设备宽度一般是在320-470之间，与375产生的偏差效果并不会很大，当然偏差越大差异越大。

（2）. 假如用的是px单位，媒体查询做适配。虽然这么做能适配机型，让效果看起来都差不多，但是做起来应该很痛苦，每个固定长度的元素都要写一遍，这会是很要命的吧。

（3）. 假如用的是rem单位，不动态计算font-size值，不做媒体查询。我靠，那这不是跟第一种情况一样。

（4）. 假如用的是rem单位，动态计算font-size值。计算方式如下：

var baseSize = 50, // 基数
    baseWidth = 375, //量取值大小
    fontSize =  (document.documentElement.clientWidth / baseWidth * baseSize).toFixed(2) ; //这个就是动态font-size值

这里我有一点没有说是， 这个计算公式是viewport设置initial-scale=1的情况，如果是其他缩放比例，那就需要乘以这个缩放比例。

例如：https://m.taobao.com/（淘宝移动版）

其viewport：

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

其fontsize计算方式：

var baseSize = 75, // 基数
    baseWidth = 375, //量取值大小
    fontSize =  (document.documentElement.clientWidth / baseWidth * baseSize * 0.5 ).toFixed(2) ; 

这里面关键的是那个375的基础量取值，当取375时，页面效果在设备宽度为375就必须显示正常，这个是很关键的约定。

（5）. 假如用的是rem单位，媒体查询做适配。 在各个媒体查询的区间设置适当的font-size，没什么特别的。

最终方案

根据上面的情况，我觉得转换的方式可以用下面步骤。

（1）. 设计稿应有约定的大小（例750px），选取一个手机的设备宽度做量取大小值（例375）。

（2）. 限制使用rem，选取一个font-size值作为的基数。

（3）. 计算每个元素的rem值，进行界面开发。

（4）. js计算当前设备宽度的fontSize，并设置回html元素上。（适配步骤）

（5）. 媒体查询作为补救措施，特殊设备宽度设置特殊的font-size。（这步不是必须的）

注意

（1）. px可以用，但是当心效果会偏大或偏小，元素可能还会往下掉。

（2）. 界面开发时只针对iPhone6（375pt）一种机型，页面完成后，才做适配步骤。

（3）. 设计师可能会输出标注图（750px）和@3x切图（1125px）两种图。用@3x切图的设计稿切图，在超清屏幕才能清晰；标注图可用来计算元素长宽；但是设计师可能为了简单，就只输出一种视觉图，就如文章开头说的750px、1080px。

（4）. 使用sass或less可以让代码写得直观、简单。

例如：

padding: rem(5) rem(15) 0 rem(15);

这样尺寸都是对应的设计稿的尺寸，开发人员就不用关心里面的实现细节了。

总结

设计稿转换页面单位尺寸，简单做就是——先针对某个机型做，再做适配。

src="http://player.youku.com/embed/XNzkxMTc3OTM2" allowfullscreen="" frameborder="0" height="498" width="510"> src="http://player.youku.com/embed/XNzkxMTc3OTM2" allowfullscreen="" frameborder="0" height="498" width="510">