Customizing css: how to keep design universal?


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:


Check it:

and all will be clear :wink:


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?


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


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?


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.


All right, thanks again.