Ionic Framework is used for building cross-platform mobile apps. Cross-platform apps are apps that work on more than one platform (e.g. android, iOS, Desktop), using the same code base.
Ionic comes out of the box with mobile-optimized responsive UI components, which adjust themselves accordingly across different screen sizes (responsiveness). This is what makes Ionic really great to use.
However, without extra effort, you will not get eye-popping responsiveness, and your app will look amateur or average. Thus, 'make your ionic apps 100% responsive' will turn your app from okay-but-not-excellent on some screens towards first-rate perfect beauty on all screens.
100% responsiveness simply means having a layout that is scalable across different screen sizes without losing its proportionality in relation with its elements and to different parts of the screen. This means the way your app appears on an iPhone X should be just as pleasant when it is opened on an iPad (even though an iPad is roughly two times the size of an iPhone X), and should appear just as pleasant on a desktop. This efficiency of design is music to the user. It attests to a precision of purpose. Each user of your app albeit with different devices should feel as though your app was specifically built for their particular device. 100% responsiveness has everything to do with CSS. And the css units for responsiveness are rem, em, %, vw, vh. These units are called relative units.
It is on CSS relative units that all hope of true 100% responsiveness is based. To attain this responsive goal, you will not accept any fixed unit such as px in your application. With that background set, let us develop our responsive app.
This efficiency of design was music to the young mind. It attested to a precision of purpose and the promise of adventure.
- Count Alexander Rostov in 'The Gentleman From Moscow'
I assume that you have the ionic cli environment set up on your computer. If you don't, follow the installation guidelines on the ionic website. Essentially, you install the ionic cli by typing the below command in your terminal
npm install -g @ionic/cli
If you have an existing app, great! work with it. Otherwise you can start a new app by typing
ionic start exampleApp
exampleApp is the name of the app.
Having created your new Ionic app, switch into its directory, and run the app in the browser, by typing in the terminal the below command
ionic serve
Towards Responsiveness
Before beginning to develop your app, you should decide on the screen size you want to work with. This will be your base screen size, from which you will work out the relative percentages of the layout for all other screen sizes.
For mobile applications, a very good generic screen width to work with is 360px. Alternatively, you can choose any of the template mobile screen sizes that the Chrome browser offers in its device toolbar.
From the image above, you can see that we have settled on using the Samsung Galaxy S8+ screen size as our base working screen size. The advantage of working with a mobile screen size when developing with ionic is that the UI components that ionic offers were especially built with mobile screen dimensions in mind, so when you use a mobile screen size, you see how these components were designed to look.
Now that we've settled on the base screen size that we will be working with (360px), let us go to our codebase and implement responsiveness.
In the global.scss file, which can be found in the src folder, append the css media queries typed out below
/* For responsiveness across screens */
html {
font-size: 100%;
@media (max-width: 289px) {
font-size: 45%;
}
@media (min-width: 290px) {
font-size: 50%;
}
@media (min-width: 300px) {
font-size: 52.5%;
}
@media (min-width: 320px) {
font-size: 55.5%;
}
@media (min-width: 325px) {
font-size: 56.5%;
}
@media (min-width: 326px) {
font-size: 57%;
}
@media (min-width: 330px) {
font-size: 59%;
}
@media (min-width: 360px) {
font-size: 62.5%;
}
@media (min-width: 411px) {
font-size: 70%;
}
@media (min-width: 500px) {
font-size: 85%;
}
@media (min-width: 720px) {
font-size: 100%;
}
@media (min-width: 1000px) {
font-size: 110%;
}
}
html.ios {
@media (max-width: 359px) and (min-width: 320px) {
font-size: 59%;
}
}
Explanation
The default font-size of most web browsers is 16px. So the above code gives us a percentage of that 16px, for different ranges of screen size. Keep in mind that we selected 360px as our working screen size. 62.5% of 16px gives us 10px. This translates to 1rem equal to 10px. This makes conversion easier especially when we are getting the measurement from a UI design that is very likely to be in px.
The above CSS code says I want the font-size of my app to be 100% of whatever value I give it, except when the device screen falls within any of the limits captured by the different media queries. In that case, let the font-size of the app be the percentage value found within that limit.
The html.ios css selector targets iOS devices.
With the font-size of the html set globally, we can go into the different css files of our codebase, and confidently write responsive css using rem, em, %, vh, and vw units. Remember we don't use absolute units (px) for responsive design.
Some CSS tidbits
A rem value changes in proportion to the root computed font-size i.e the global html font-size. rem is the unit we will use in most cases. It's great for aligning block elements relative to the screen size.
An em value changes in proportion to the font-size of the parent element. em units are better for sizing inline elements. SVG icons are perfect candidates for em-based sizing.
A vh value is the % value of the current viewport height
A vw value is the % value of the current viewport width.
The above tidbits set you good to go on and build responsively. But with ionic, that will only get you to like 80% of your desired goal.
As long as you use ionic built-in UI components, your UI may look decent, but it will still lack that proportionality that makes an app feel great on all screens. This is because ionic UI components are built using px units. px units are absolute. They don't scale.
Ionic built-in UI components
Take the ion-item for example, this component has custom css properties such as --padding-end, --padding-start, --padding-top, --border-radius. In essence, all properties of an ionic built-in component, that have to deal with length, were designed with px unit. Therefore you have to update them in your css file with their rem equivalent. That is to say, if the default --padding-start of ion-item is 10px, in your css file, you update it
ion-item {
--padding-start: 1rem // or whatever value that fits your purpose
}
By updating the default custom css properties of ionic UI components, you get a component that truly scales magnificently across all screens.
Ionic CSS utilities
Eschew completely the use of ion-padding and ion-margin css utilities in your templates. These particular utilities are in px units. They do not scale. Instead create the padding or margin, as required, inside your css file.
Other CSS utilities that ionic provides are actually great for responsive design. Ionic grid system is amazing for great responsiveness.
And yes, with these extra efforts, your app transforms from one that looks good on some screens, and average on others, to one that effuses joy in the hands of any user on any screen. I hope this post is helpful to you. Thank you for reading.
Top comments (0)