How to make CSS working with multiple device in angular



I’m using nativescript with angular

i need to make my css file working with multiple devices sizes and with landscape

i try this but it does not work

i create 2 file ‘’ & account.login.port.css’
and i call it in component like this

selector: “hp-login”,
templateUrl: “account.login.html”,


put it does not work correctly

how can i do it


In your constructor method you can do something like this:

import { Orientation } from "nativescript-orientation";
import { DeviceOrientation } from "ui/enums";

constructor(private page: Page) {
    this.isLandscape = DeviceOrientation.landscape === Orientation.getOrientation()); ? "~/pages/login/" : "~/pages/login/login.component.port.css");


Make sure you install nativescript-orientation plugin, I am not sure if it will work but its a good start.

Another solution is described in the nativescript-orientation plugin where you can handle the orientation change very easily. This post also talks about it:

Good luck!