Nativescript screen size qualifiers not xml but css - css

Question

How can I make screen size qualifiers for CSS files. Like app.css but for certain screen size like 10" tablets. If it's possible, can I also make Android specific like app.minWH720.android.css. It seems not to work, am I doing something wrong or is only xml supported.
I want to archive different label sizes on different devices. XML file are fine without touching them.
I'm aware of documentations like: https://www.nativescript.org/blog/details/supporting-multiple-screen-resolutions-in-your-nativescript-app

Answer 1

Considering that you have screen qualifers pages like
main-page.minWH720.xml
main-page.minWH480.xml
You can simply provide different CSS classes for your XML elements.
.myButton-minWH720 {
background-color: red
}
.myButton-minWH480 {
background-color: blue
}
And use them accordingly where needed..
As for the second question you can get your metrics using the platform module like this in your app.js
var platform = require("platform");
var screen = platform.screen;
console.log(screen.mainScreen.heightDIPs);
console.log(screen.mainScreen.heightPixels);
console.log(screen.mainScreen.scale);
console.log(screen.mainScreen.widthDIPs);
console.log(screen.mainScreen.widthPixels);
var device = platform.device;
console.log(device.os);
console.log(device.manufacturer);
console.log(device.osVersion);
console.log(device.model);
console.log(device.sdkVersion);
console.log(device.deviceType);
console.log(device.uuid);
console.log(device.language);
console.log(device.region);