HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
The last chapter we introduced small devices we use .small-*
class to set the grid ratio of 25% / 75%:
<div class="small-3 columns">/en/en</div> <div class="small-9 columns">/en/en</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">/en/en</div> <div class="small-9 medium-6 columns">/en/en</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
).
Note: To ensure that the number of columns add up to 12! |
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):