nativescript-multiple-screen-css

一个用于处理多个屏幕尺寸和设备方向的NativeScript插件

安装

从命令提示符进入您的应用根文件夹并执行

tns plugin add nativescript-multiple-screen-css

它做什么？

它自动将类添加到当前 页面 的 cssClass 变量中

'android' or 'ios' or 'windows'
'portrait' or 'landscape'
'wXXX' where XXX is the matched size from the sizeGroupW
'hXXX' where XXX is the matched size from the sizeGroupH
'swXXX' where XXX is the matched size from the sizeGroupSW

用法

要使用该模块，只需 require() 它即可

require( 'nativescript-multiple-screen-css' );

注意：您不需要保留对该模块的引用；您只需加载一次。您可以将它添加到您的 app.js 文件中，然后忘记它。

它将自动将其方法附加到NativeScript库中的所有适当类，使其表现得像内置的。

这有什么帮助？

纯炫 NativeScript (PAN)

StackLayout {
  background-color: red;
}

.android StackLayout {
  background-color: green;
}

NativeScript Angular (NAN)

StackLayout {
  background-color: red;
}

.android :host StackLayout {
  background-color: green;
}

因此，在iOS和Windows上背景是红色，在Android上是绿色。请注意，在Angular中，您必须使用 /deep/ 或更倾向于 :host 前缀来正确地使用这些规则！

为什么使用这个？

您可以通过这种方式设置所有正常的CSS值，包括宽度、高度、字体大小。这允许您根据当前屏幕宽度或高度或最小宽度（sw）来区分您的UI。

尺寸组

该插件将创建 .wXXX 和 .hXXX，其中 XXX 是屏幕的DPI。该插件附带默认的尺寸组 [1280, 1024, 800, 600, 540, 480, 400, 360, 320]，您可以调用以配置自己的尺寸组，包括 .wXXX、.hXXX 和 .swXXX。

var multipleScreenCss require( 'nativescript-multiple-screen-css' );
multipleScreenCss.sizeGroupingsW([size1,size2,size3,...]);// For .wXXX classes
multipleScreenCss.sizeGroupingsH([size1,size2,size3,...]);// For .hXXX classes
multipleScreenCss.sizeGroupingsSW([size1,size2,size3,...]);// For .swXXX classes

确定尺寸组CSS类的方式是，如果屏幕高度为960dpi，宽度为600dpi，则它会获得 .h800 类，因为它大于800且小于1024，并获得 .w600 类，因为它是正好600，以及 .sw600 类，因为这是无论如何旋转的最小可能宽度。

因此，它在每个页面的启动时设置五个不同的CSS类；您可以使用任意（或全部）它们作为CSS规则。

• .android | .ios | .windows
• .wXXX
• .hXXX
• .swXXX
• .portrait | .landscape

请注意，这些是在每次页面加载时计算的。

演示

演示将向您展示它生成的CSS类名。

许可证

本软件可在MIT许可证下获得。