Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support media queries in CSS #64

Open
enchev opened this Issue Apr 24, 2015 · 24 comments

Comments

Projects
None yet
@enchev
Copy link
Contributor

enchev commented Apr 24, 2015

From @vakrilov on March 19, 2015 8:28

Support for CSS media queries in the CSS. The issue is related to #154 and the propose is to allow more flexibility when targeting different devices with different resolutions.

Copied from original issue: NativeScript/cross-platform-modules#203

@tjvantoll

This comment has been minimized.

Copy link
Contributor

tjvantoll commented Jul 9, 2015

+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%; }
}
@andreyluiz

This comment has been minimized.

Copy link

andreyluiz commented Jan 10, 2016

@NathanaelA

This comment has been minimized.

Copy link
Contributor

NathanaelA commented Feb 26, 2016

I have figured out a way to do this now with the new 1.6 runtimes. Not as cleanly as the above example; but I can now create a lot of my visual style based on css and it the screen changes orientation has it automatically applies the proper css. The code is relatively simple and I've been using it to good use in one of my apps that I want to fully support P/L modes and look nice! If you guys are interested; I can do up a blog post to show how to do this.

@tjvantoll

This comment has been minimized.

Copy link
Contributor

tjvantoll commented Feb 26, 2016

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

I am very interested 😀

@NathanaelA

This comment has been minimized.

Copy link
Contributor

NathanaelA commented Feb 27, 2016

Actually I was able to abstract the pieces into a simple plugin that can handle the entire heavy lifting, and make it completely automated except for any item that can't be controlled by css. For that case; if you export a "orientation" function on any screen that needs it, it will be called when the page starts and any time it rotates, so that you can manually adjust any of those settings. I'm currently using it and it works very very NICELY. I'll try to get documentation and get this released this weekend. Ping me Monday, if I get busy and forget. 😀

@tjvantoll

This comment has been minimized.

Copy link
Contributor

tjvantoll commented Feb 27, 2016

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

@NathanaelA

This comment has been minimized.

Copy link
Contributor

NathanaelA commented Feb 29, 2016

The new http://github.com/nathanaela/nativescript-orientation plugin will allow you at least target when the orientation changes so that the CSS can be completely different based on Landscape or Portrait. You can target other size screens by using separate css files for the sizes.

@glebmachine

This comment has been minimized.

Copy link

glebmachine commented Aug 21, 2016

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

@hamorphis hamorphis added this to the 2.6.0 (TBD) milestone Dec 8, 2016

@hshristov hshristov modified the milestones: 3.1 TBD, 3.0 Apr 27, 2017

@hshristov hshristov removed this from the 3.1 milestone May 17, 2017

@toddanglin

This comment has been minimized.

Copy link
Contributor

toddanglin commented May 25, 2017

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. :)

@vakrilov

This comment has been minimized.

Copy link
Member

vakrilov commented May 25, 2017

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.

@toddanglin

This comment has been minimized.

Copy link
Contributor

toddanglin commented May 25, 2017

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 comment has been minimized.

Copy link
Contributor

NathanaelA commented May 25, 2017

@toddanglin - Sounds like you need my NativeScript-scaledFonts plugin... ;-) It actually handles this really really well. It has several settings to help you deal with Phones and Tablets, including separate scaling systems for each if need be...

However, I don't know if it is 3.0 compatible yet...

If you watch the animation you can see; the right side is using my scaled plugin, the left side is default behavior. (BTW: The three bottom lines should have been scaled on the right side, but I did this demo before I even noticed (& fixed) that bug; and so I totally missed them. and I have been too busy to redo the demo yet...)

non-scaled

@NathanaelA

This comment has been minimized.

Copy link
Contributor

NathanaelA commented May 25, 2017

Oh, also I should mention my free NativeScript-Platform-CSS actually allows you to do this manually; it actually will allow you to create

.ios1024 {
  font-size: 22;
}
.ios414 {
  font-size: 16;
}
.ios {
font-size: 12;
}
.android380 {
  font-size: 10;
}

If you combine my nativescript orientation plugin above with this one you can even do:

.landscape.ios1024 {
  font-size: 20;
}
.ios1024 {
  font-size: 22;
}

And you will get 22 on a 1024 dpi screen in portrait and font size 20 in landscape... ;-)

@vakrilov

This comment has been minimized.

Copy link
Member

vakrilov commented May 26, 2017

@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.

@NathanaelA

This comment has been minimized.

Copy link
Contributor

NathanaelA commented May 26, 2017

@vakrilov - Agreed; that is why my scaled fonts plugin actually allows two separate scaling systems (if need be), some apps I have done -- I want it to look identical no matter if it is a phone or a ipad. Everything just needs to be (in some cases much much) larger.

Other apps; I want the phones to scale one way and they use a phone xml file and then the tablets have their own xml file and they use an independent tablet scaling system where you set its starting break point and it scales all the tablets based on that information. This allows you to use the two different xml files to create unique layouts, and use two different scaling systems so that they look great no matter if the device is a phone or a tablet. ;-)

By combining NSF (ns-scaledFonts) with my free NPC (nativescript-platform-css), and my free NSO (nativescript-orientation) plugin I can make each screen look great no matter the resolution or device, or orientation; without doing a lot of manual work. But those who want 100% free can use the NPC with its media-dpi settings to do the same "font" sizing thing manually. I typically use the NPC to deal with my layout & image sizing at different dpi's where I need to tweak an image or some size of a button/layout for some reason.

The NSF is used to deal with all the font sizes; because I only have to set the font size once and make it look good on one phone at the base DPI (and tablet in some cases), and the font will automatically be scaled properly to every other device.

@erkanarslan

This comment has been minimized.

Copy link

erkanarslan commented Dec 18, 2017

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.

@rolaru

This comment has been minimized.

Copy link

rolaru commented Dec 29, 2017

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

@bhavincb

This comment has been minimized.

Copy link

bhavincb commented Mar 8, 2018

+1

@boldham31

This comment has been minimized.

Copy link

boldham31 commented Sep 12, 2018

Any update on this feature being implemented?

@radeva radeva added css and removed css labels Oct 15, 2018

@Jonatthu

This comment has been minimized.

Copy link

Jonatthu commented Dec 24, 2018

We really need this please add this to the roadmap!

@srvasn

This comment has been minimized.

Copy link

srvasn commented Jan 16, 2019

Any updates on supporting this yet?

@DeepakArora76

This comment has been minimized.

Copy link

DeepakArora76 commented Jan 30, 2019

Any updates?

1 similar comment
@mchallenger88

This comment has been minimized.

Copy link

mchallenger88 commented Feb 20, 2019

Any updates?

@mrpaaske

This comment has been minimized.

Copy link

mrpaaske commented Mar 11, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.