Metro UI 4 Jekyll supports following general screen size rules:
| Device Size | Device Type | Container size | Typography |
|---|---|---|---|
| min 1200 | Large desktops | 1140px | html > font-size 70% |
| min 1024 | Desktops | 940px | html > font-size 62.5% |
| max 1024 | Tablet landscape | 940px | html > font-size 62.5% |
| max 768 | Tablet portrait | 720px | html > font-size 62.5% |
| max 640 | Phone landscape | 100% | html > font-size 60% |
| max 480 | Phone portrait type 1 | 100% | html > font-size 45% |
| max 360 | Phone portrait type 2 | 100% | html > font-size 40% |
| max 320 | Phone portrait type 3 | 100% | html > font-size 40% |
First create a page wrapper with class .container. This wrapper will change size for any devices.
<div class="container">
...content here...
</div>
Dimensions of the basic elements of typography expressed in rem units relative to the font size specified for html.
Grid changes its behavior for different screen resolutions.
| Tablet landscape, desktop and lage | Grid has default behavior |
| Tablet portrait |
Grid has next behavior:
|
| Phones | All cells change self size to 100% |
Grid with fluid subclass currently is unchanged.
Metro UI 4 Jekyll provides helper classes to control the visibility of elements on different types of devices:
Helpers for hide elements |
|
| .no-large | element is not shown on the big screen |
| .no-desktop | element is not shown on the desktop |
| .no-tablet | element is not shown on the all tablets and phones |
| .no-tablet-portrait | element is not shown on the tablets with portrait orientation and phones |
| .no-phone | element is not shown on the all phones |
Helpers for show elements |
|
| .on-large | element is shown on the big screen |
| .on-desktop | element is shown on the desktop |
| .on-tablet | element is shown on the all tablets |
| .on-phone | element is shown on the all phones |
If you have something that does not work as in the demo, see the demo source code