Customizing css: how to keep design universal?

ionic-v1
1

Hi all,

I have a very basic question probably: How can I keep my css compatible within Android and IOS?
And within each different screen size?

For example, if I look at one random codepen such as swipe cards, I see that the css file indicates a swipe-card of width 300px and height 300px. But this will render differently across each device (for example, if I run it on my android device or emulate on IOS, I see two different renderings because the screen sizes are different). Do I really have to create different css config for each device? And for IOS and Android?

What is the best practice in order to build a multi-platform and multi-device Ionic project? Is there any demo/tutorial on this?

Sorry if it is too trivial :slight_smile:

1 Like
2

Check it: https://github.com/driftyco/ionic/blob/master/js/views/sliderView.js#L63

and all will be clear :wink:

3

I see, thanks for the link @evenemento !
Does it mean that I do not have to care about compatibility at all because everything is done by Ionic?

4

yes,
ionic leverages RWD principles and you don’t have to focus on things such as screen size or pixel density.

5

Thanks a lot @evenemento, I am beginning to understand :slight_smile:
But RWD principles are valid for just the Ionic built-in css or for any css I might want to add to my app.css? I mean, should I just use the Ionic css components or by writing mines I still get RWD principles respected?

6

it’s depend what kind of components would you like to create and how you use styles.

as I wrote earlier, you don’t have to focus on it, but you have to remember about it.

7

All right, thanks again.