Taro項目中設置了設計稿尺寸為375,taro-ui的樣式會被放大


首先以下方法只能在微信小程序中生效,在h5端並不生效,其他小程序還沒有測

安裝依賴

npm install postcss-px-scale -dev

 安裝完之后在根目錄config文件夾的index文件中找到以下字段並修改

 

 

  designWidth: 375,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
    375:1/2
  },

  然后在當前文件中mini項中的 postcss 加入就可以了

      "postcss-px-scale": {
        "enable": true,
        "config": {
          "scale": 0.5, //縮放為1/2
          "units": "rpx",
          "includes": ["taro-ui"]
        }
      },

  

 

  但也有的說在h5配置項中的 postcss 加入

      "postcss-px-scale": {
        "enable": true,
        "config": {
          "scale": 0.5, //縮放為1/2
          "units": "rem",
          "includes": ["taro-ui"]
        }
      },

  

 

 

  在indexjs文件的h5中加入當前字段

 esnextModules: ['taro-ui'],

  重新打包,會在h5頁面看到字體大小正常


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM