+1

There are a lot of things in the media queries spec, some of which apply to {N}, and some which don't. I think the most important ones to support are orientation, min-height/max-width, and min-height/max-height. I'd love to be able to use syntax like this in my apps:

@media (orientation: landscape) {
    button { width: 50%; }
}
@media (orientation: portrait) {
    button { width: 80%; }
}
@media (min-width: 700) {
    button { width: 20%; }
}

@tjvantoll +1

If you guys are interested; I can do up a blog post to show how to do this.

I am very interested 😀

@NathanaelA: Fantastic! Make sure to ping me when it’s ready so I can try it out.

Do you have plan to support min-device-pixel-ratio?

Any updated thinking on this item?

I have a scenario where I need to adjust styles for the big 12" iPad due to it's extra layout space, and media queries would be a perfect solution.

Obviously, I try to support with multiple files, but media queries would be cleaner. So just re-adding a +1 to this item. :)

I still think this one is quite relevant (especially in angular where the screen-size-qualifiers do not work: NativeScript/nativescript-angular#404).

It gets pushed back in the back log, due to more urgent issues though.

Got it. Good point on the Angular support/problem, too! Forgot about that.

Hopefully we can get it prioritized over the summer. Very powerful enhancement for efficiently supporting multiple screen sizes.

@NathanaelA This look pretty neat.

Just a side note: When using DIPs, the size of the text will have (nearly) the same physical size, no matter the device. It is true that the text looks tiny in an iPad simulator, but keep in mind that it renders the 4" iPhone 5s screen and the 10" iPad screen with the same size on your monitor. If you run you app on an actual iPad you will probably want to have different layout instead of having a giant (5"-6" wide button). Of course it depends on the app you are building.

Media queries can also be used to apply different css rules for different platforms. That way we wouldn't have to create a new css file for each platform. For example:

@media (platform : android) {
    Label { text-align : left; } 
}

@media (platform : ios) {
    Label { text-align : center; } 
}

Edit: for now I can use https://plugins.nativescript.rocks/plugin/nativescript-platform-css plugin, but it would be better if this were a core feature.

Edit2: No need for a plugin. You can use Nativescript's platform and device classes. Check this link. https://docs.nativescript.org/angular/ui/styling#root-views-css-classes

I also agree with @erkanarslan and think that FULL MEDIA QUERIES SUPPORT should be included as a core feature.

+1

Any update on this feature being implemented?

We really need this please add this to the roadmap!

Any updates on supporting this yet?

Any updates?

I'd also like to see this added to core 👍🏻

With {N} 6.0 coming soon and defaulting to Webpack builds (which do not support the Core screen size qualifiers), it seems essential to now support some alternative method for specifying styles for different screen sizes (media queries or otherwise).

It's probably the right time to also consider deprecating this feature since it's increasingly unsupported on most flavors of {N} (and will not be supported in the 6.0 default path).

@NathanaelA I don't think the support is being removed, per se, but {N} 6.0 will make Webpack builds the default build process for all new projects. So for any new projects starting with 6.0, or projects that choose to upgrade to Webpack, these filename conventions will not be available. As I such, I think it is probably time to offer a new, "official" way forward for handling the use cases once covered by file name conventions.

That said, the nativescript-platform-css plugin is a good workaround. Good point.

Any update on this?

The fix proposed by @NathanaelA has been depreciated for NS v6.7.4 and has been moved to a paid subscription model which just isn't viable for most developers.

+1 This is really needed and has been on the backlog for a while now. Any timeline for implementing this yet?

@radiohe4d @NathanaelA I took the liberty to update nativescript-platform-css for nativescript 7.0 and i'll keep it up to date. Feel free to use it.

https://github.com/Vulksoft-S-R-L/nativescript-platform-css