Responsive App design

ionic-v1
1

Hey Guys,

First time creating a Ionic app and I’m loving it so far!
I see great potentials with this framework and can’t wait for the full stack version of it.

I’m creating my first native iOS app using, generator-ionic with Firebase as the database and I have some Responsive questions.

How should I code for the different screen sizes that iOS has?
Certain images look way bigger on a 2x Retina screen etc. I’m trying to center the image on the log in screen but on every device it seems to be different

HTML

<ion-view hide-nav-bar="true" class="homelogin">  
<div id="landingBox">
	<img src="img/logoLanding.png">  
    <div>
		<a class="facebookLink" ng-click="tryLogin()">Login with Facebook</a>
	</div>
</div>
</ion-view>

CSS:

.#landingBox {
margin-top:100px;
text-align:center;
}

.#landingBox img{
margin-bottom:25px;
}

Appreciate the support,

Mike

2

You probably need to explore media queries for styling across a range of devices.

WARNING: I hate CSS and suck at it. I’m not sure I’m doing media queries well.

Example :

@media (min-width: 321px) {

    #landingBox {
        max-width: 50%
    }
}

@media (max-width: 320px) {
    #landingBox {
        max-width: 30%
    }
}