GeezerVison

PR Checklist

• The PR title follows our guidelines: https://github.com/NativeScript/NativeScript/blob/master/tools/notes/CONTRIBUTING.md#commit-messages.
• There is an issue for the bug/feature this PR is for. To avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it.
• You have signed the CLA.
• All existing tests are passing: https://github.com/NativeScript/NativeScript/blob/master/tools/notes/DevelopmentWorkflow.md#running-unit-tests-application.
• Tests for the changes are included - https://github.com/NativeScript/NativeScript/blob/master/tools/notes/WritingUnitTests.md.

What is the current behavior?

• Media queries only accept the min-/max- prefix syntax. Tailwind v4 and Bootstrap 6 write every breakpoint in the Media Queries Level 4 range syntax (@media (width >= 40rem)), which fails to parse, so none of their responsive variants (sm:, md:, .col-md-6) ever apply.
• rem and em in a media query are read as plain numbers: (min-width: 48rem) is 48.

What is the new behavior?

• Range features are parsed: (width >= 600px), (600px < width), (400px <= width < 700px) and (700px > width >= 400px), combined with media types, and, not and lists as before. Malformed ranges still throw.
• rem and em are the initial font size, 16, as in CSS. Tailwind's md breakpoint (width >= 48rem) is 768.
• Other lengths keep their NativeScript meaning: px is a device pixel, and a number without a unit is a device-independent pixel. (In CSS a media query px is a CSS pixel; changing that would change which queries existing apps match, so it is left for a separate discussion.)

Tests: css-mediaquery/index.spec.ts (6) and a stylesheet-level case in css-selector.spec.ts.

Verified with all of these core PRs merged together (#11527–#11537): apps/automated passes on the iOS 26.4 simulator (1830 OK, 0 failed) and on an Android API 36 emulator (1692 OK; the one failure is the network-dependent IMAGE-CACHE.test_ImageCache_ValidUrl timeout, which also passes on reruns).