Question

我目前正在使用打字稿和版本开发nativescript应用程序。 angluar2。我要改变平板电脑和手机之间的布局。但是在打字稿和打印机中并没有支持多个屏幕尺限定符。 angluar2。所以我尝试使用nativescript-platfrom-css插件。

tns插件添加nativescript-platform-css

但它不适用于我的项目。我的项目中有一些代码如下。

///directory structure///
... ...
pages/login.html/
pages/login.component.ts/
pages/login.common.css/
... ...

////main.ts///
... ...
import nativescriptPlatfromCss = require('nativescript-platform-css');
... ...

////// login.ts ////////

@Component({
  selector: "login",
  providers:[UserService],
  templateUrl:"pages/login/login.html"  ,
  styleUrls:["pages/login/login-common.css", "pages/login/login.css"]
})

...... /////的login.html

<StackLayout #container>
    <TextField class="inputEmail" hint="Email Address"></TextField>
... ...
</StackLayout>

//// login.common.css

.inputEmail {
   backgournd-color:'white';
}
.android600 .inputEmail{
   background-color:'red';
}
.android720 .inputEmail{
   background-color:'blue';
}

......

我已经看过https://curl.haxx.se/ca/cacert.pem和https://www.nativescript.org/blog/supporting-multiple-screen-resolutions-in-your-nativescript-app。

但我无法实现目标。

如果你知道在打字稿和＆amp ;;中实现多个屏幕大小的最佳方式angluar2应用程序，请让我知道。

感谢

Answer 1

public class DeviceType
{
    public DeviceType() 
    {
        this.DeviceFeatures = new HashSet<DeviceFeature>();
    }
    [Display(Name = "ID")]
    public int DeviceTypeID { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }

    public ICollection<DeviceFeature> DeviceFeatures { get; set; }
}

public class DeviceFeature
{
    public DeviceFeature() 
    {
        this.DeviceTypes = new HashSet<DeviceType>();
    }   
    [Display(Name = "ID")]
    public int DeviceFeatureID { get; set; }

    [Required]        
    public string Name { get; set; }
    public string Description { get; set; }

    public ICollection<DeviceType> DeviceTypes { get; set; }

}

- https://github.com/NativeScript/nativescript-angular/issues/404 “EddyVerbruggen评论”。

也可以包括平台检测，因此它有助于根据设备和宽度或高度创建CSS。

const isTablet: boolean = device.deviceType == DeviceType.Tablet;

@Component({
  styleUrls: ['default.css', (isTablet ? 'tablet.css' : 'phone.css')]
})

如何设置屏幕尺寸限定符打字稿＆amp;本地文字中的angluar2

1 个答案: