forked from olton/Metro-UI-CSS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
responsive.php
110 lines (102 loc) · 5.19 KB
/
responsive.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<?php include("header.php")?>
<div class="page secondary">
<div class="page-header">
<div class="page-header-content">
<h1>Responsive<small>design</small></h1>
<a href="/" class="back-button big page-back"></a>
</div>
</div>
<div class="page-region">
<div class="page-region-content">
<div class="grid">
<div class="row">
<div class="span10">
<h2>Enabling responsive features</h2>
<p>
Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <code><head></code> of your document.
</p>
<pre class="prettyprint linenums">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="modern-responsive.css" rel="stylesheet">
</pre>
<p class="tertiary-text">
<strong>* for <code>hdpi</code> devices you can be add param <code>target-densitydpi=device-dpi</code> to meta <code>viewport</code></strong>
</p>
</div>
</div>
<div class="row">
<div class="span10">
<h2>About responsive Metro UI CSS</h2>
<p>
Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around <code>min-width</code> and <code>max-width</code>.
</p>
<ul>
<li>Modify the width of column in our grid</li>
<li>Stack elements instead of float wherever necessary</li>
<li>Resize headings and text to be more appropriate for devices</li>
</ul>
</div>
</div>
<div class="row">
<div class="span10">
<h2>Supported Devices</h2>
<p>
Metro UI CSS supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:
</p>
<table class="bordered striped">
<thead>
<tr>
<th></th>
<th>Layout width</th>
<th>Column width</th>
<th>Gutter width</th>
</tr>
</thead>
<tbody>
<tr>
<td>Large display</td>
<td>1200 px and up</td>
<td>in progress...</td>
<td>in progress...</td>
</tr>
<tr>
<td>Default</td>
<td>980px and up</td>
<td>60px</td>
<td>20px</td>
</tr>
<tr>
<td>Portrait tablets</td>
<td>768px and above</td>
<td>42px</td>
<td>20px</td>
</tr>
<tr>
<td>Phone to tablets</td>
<td>767px and below</td>
<td colspan="2" class="center">Fluid columns, no fixed width</td>
</tr>
<tr>
<td>Phones</td>
<td>480px and below</td>
<td colspan="2" class="center">Fluid columns, no fixed width</td>
</tr>
</tbody>
</table>
<pre class="prettyprint linenums">
/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
<?php include("footer.php")?>