反应本机自适应字体大小

ios React.js

乐Near

2020-03-18

我想问一下如何处理本机句柄或做响应字体。例如,在iphone 4s中,我的fontSize:14,而在iphone 6中,我的fontSize:18。

第2026篇《反应本机自适应字体大小》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
神无阿飞古一 2020.03.18

为什么不使用PixelRatio.getPixelSizeForLayoutSize(/* size in dp */);,它与pdAndroid中的单位相同

TomTom乐 2020.03.18

看看我写的图书馆:https : //github.com/tachyons-css/react-native-style-tachyons

它允许您rem在启动时指定root-fontSize(),您可以使其与您的PixelRatio设备特性或其他设备特性相关。

然后,您将获得相对于您的样式rem,不仅是fontSize,而且还有填充等。

<Text style={[s.f5, s.pa2, s.tc]}>
     Something
</Text>

扩充内容:

  • f5始终是您的基本字体大小
  • pa2 给您相对于基本字体大小的填充。
十三卡卡西 2020.03.18

因为响应式单元目前在反应式本机中不可用,所以我想说最好的选择是检测屏幕尺寸,然后使用它来推断设备类型并有条件地设置fontSize。

您可以编写类似以下的模块:

function fontSizer (screenWidth) {
  if(screenWidth > 400){
    return 18;
  }else if(screenWidth > 250){
    return 14;
  }else { 
    return 12;
  }
}

您只需要查询每个设备的默认宽度和高度即可。如果在设备更改方向时宽度和高度发生了翻转,您可能可以改用宽高比,或者只是找出两个维度中较小的一个以得出宽度。

模块这一个可以帮你找到设备的尺寸或设备类型。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android