Grid Foundation - Medium Equipment
The last chapter we introduced small devices we use .small-*
class to set the grid ratio of 25% / 75%:
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
On medium-sized device that we recommend a ratio of 50% / 50%.
Tip: The screen size is defined in the medium-sized equipment 40.0625em
to 64.0624em
between.
Medium-sized equipment .medium-*
category.
Now we add two on a midrange device:
<div class="small-3 medium-6 columns">....</div> <div class="small-9 medium-6 columns">....</div>
? In the instance set up two columns, the ratio was 25% and 75% (Foundation is mobile first: If not specified, the large equipment will inherit .small class code):
The proportion of small devices% 25/75% ( .small-3
and .small-9
). However, the proportion of medium-sized equipment used was% 50/50% ( .medium-6
and .medium-6
).
Examples
<Div class = "small-3 medium-6 columns" style = "background-color: yellow;">
<P> This tutorial </ p>
</ Div>
<Div class = "small-9 medium-6 columns" style = "background-color: pink;">
<P> This tutorial </ p>
</ Div>
</ Div>
try it"
Note: To ensure that the number of columns add up to 12! |
Tight device for use on medium-sized
The following example, we specify .medium-6
class (not .small-*
). This indicates that in the medium or large equipment ratio of 50% / 50%. But on a small device horizontally stacked (100% width):
Examples
<Div class = "medium-6 columns" style = "background-color: yellow;">
<P> This tutorial </ p>
</ Div>
<Div class = "medium-6 columns" style = "background-color: pink;">
<P> This tutorial </ p>
</ Div>
</ Div>
try it"