設計稿及尺寸單位

在 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; // ignoredborder-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 寫成行內樣式?

<Viewstyle={{display: '-webkit-box','-webkit-box-orient': 'vertical','-webkit-line-clamp': 2,'text-overflow': 'ellipsis',overflow: 'hidden','line-height': 2}} >這是要省略的內容這是要省略的內容這是要省略的內容 </View>

總結

以上是生活随笔為你收集整理的taro之--设计稿以及尺寸单位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。