Responsiveness

Part of what makes Monogatari unique is how it is responsive out of the box, meaning people in all kind of devices with different form factors will be able to play your game.
It is important to note that responsiveness is not the same as simply scaling your game up or down to fit the screen it's being displayed on. Responsiveness actually let's you create different stylings and layouts for different sizes so you can take advantage when there's more space or adapt your elements when it's less.
Adapting to the device is done using CSS media queries.
Default Screen-Width Breakpoints
1
/** Extra Small Devices, Phones (480px) **/
2
@media screen and (min-width : 30em) {}
3
​
4
/** Medium Screens, Phablets (601px) **/
5
@media screen and (min-width: 37.56255em) {}
6
​
7
/** Medium Devices, Tablets (992px)**/
8
@media screen and (min-width: 62em) {}
9
​
10
/** HD Screen, Large Devices, Wide Screens, Desktop (1200px) **/
11
@media screen and (min-width: 75em) {}
12
​
13
/** Full HD Screen, Large Devices, Wide Screens, Large Desktops (1920px) **/
14
@media screen and (min-width: 120em) {}
15
​
16
/** Retina Screen , Large Devices, Wide Screens(2560px) **/
17
@media screen and (min-width: 160em) {}
18
​
19
/** 4k Screens, Large Devices, Wide Screens (3840px) **/
20
@media screen and (min-width: 240em) {}
21
​
22
/** 5k Screens, Large Devices, Wide Screens (5000px) **/
23
@media screen and (min-width: 312.5em) {}
24
​
25
/** 8k Screens, Large Devices, Wide Screens (8000px) **/
26
@media screen and (min-width: 500em) {}
Copied!
​
​

Configuration Options - Previous

Split Files

Next - Style & Design

CSS Classes

Last modified 1yr ago

Copy link

Contents

Default Screen-Width Breakpoints