designWidth=375px taro-ui样式放大

JaneII commented 2 years ago

Taro UI 版本信息

3.0.0-alpha.10

问题描述

taro设计稿尺寸为375， taro-ui样式放大。

复现步骤

config/index.js 都是按照官方文档配置的 designWidth: 375, deviceRatio: { "375": 2 / 1, "640": 2.34 / 2, "750": 1, "828": 1.81 / 2 },

复现代码

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

报错信息

不论是小程序、还是h5，taro-ui的样式都被放大

系统信息

Taro CLI 3.3.14 environment info: System: OS: macOS 10.14.3 Shell: 3.2.57 - /bin/bash Binaries: Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node Yarn: 1.22.4 - ~/.nvm/versions/node/v12.13.1/bin/yarn npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm npmPackages: @tarojs/cli: 3.3.14 => 3.3.14 @tarojs/components: 3.3.14 => 3.3.14 @tarojs/mini-runner: 3.3.14 => 3.3.14 @tarojs/react: 3.3.14 => 3.3.14 @tarojs/runtime: 3.3.14 => 3.3.14 @tarojs/taro: 3.3.14 => 3.3.14 @tarojs/webpack-runner: 3.3.14 => 3.3.14 babel-preset-taro: 3.3.14 => 3.3.14 eslint-config-taro: 3.3.14 => 3.3.14 react: ^16.10.0 => 16.14.0 taro-ui: 3.0.0-alpha.10 => 3.0.0-alpha.10

补充信息

在引入taro-ui样式前，修改了$hd的值 $hd: 1; @import "~taro-ui/dist/style/index.scss"; 但是，还是样式有问题。跟$hd有关的就正常，但是没有关联的样式是异常的。例如按钮组件

taro-ui是不兼容375的设计尺寸吗？如何兼容

taro-ui-bot[bot] commented 2 years ago

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

JaneII commented 2 years ago

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

是按 Issue 模板的规范提交的。麻烦及时解决下这个问题

Big-Devils commented 2 years ago

真服了，1年多了，还是没有解决。。

abraham1912 commented 2 years ago

真服了，1年多了，还是没有解决。。

https://segmentfault.com/a/1190000038158230 解决taro-ui 3.0 designWidth 配置为 375 放大问题

shushu2013 commented 1 year ago

https://github.com/NervJS/taro-ui/issues/1069#issuecomment-1255845400

zh-lx commented 1 year ago

在 taro 配置中修改 designWidth 为函数式：

config = {
  designWidth(input) {
    if (input.file.replace(/\\+/g, "/").indexOf("taro-ui/dist") > -1) {
      return 750;
    }
    return 375;
  },
}

但是要注意的一点是，所有引入的 taro-ui 的样式文件需要通过在 .js 文件中 import 'taro-ui/dist/components/xxx.scss' 的方式引入，不能通过 css 文件的 @import 引入

NervJS / taro-ui