css files for different multiple screen sizes?

2 posts, 0 answers
  1. Tim
    Tim avatar
    20 posts
    Member since:
    Apr 2016

    Posted 10 Jul Link to this post

    I have been reading the nativescript documentation on supporting multiple screen sizes.

    I have been able to define all my views without specifying the width & height values. However there are a few elements that are used on several screens that I have set the height for in the app.css.

    So is it possible to specify app.minWH600.css ?

     

    The documentation alludes to it, but provides the view XML files as example, and then uses the css as an example of a platform specifier. 

     

     

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    94 posts

    Posted 11 Jul Link to this post

    Hello Tim,

    Currently, it is not possible to specify differently CSS files for multiple screen sizes.
    However, CSS itself is providing an easier way to create different UX for your screen size qualifiers files.
    Consider the following scenario:

    You have
    main-page.minWH720.xml 
    main-page.minWH480.xml
    And you need to provide different styles for both pages.
    What you can do is the following:
    .my-button-for-wh720page {
       background-color: red
    }
     
    .my-button-for-wh480page {
       background-color: blue
    }

    And use them accordingly where needed
    For example: 
    the button in main-page.minWH720,xml will have cssClass="my-button-for-wh720page"
    the button in main-page.minWH480,xml will have cssClass="my-button-for-wh480page"


    Regards,
    Nikolay Iliev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top