In the last chapter, we introduced the use of small devices
.small-*
Class, with a grid ratio of 25% and 75%:
<div class="small-3 columns">....</div>
<div class="small-9 columns">....</div>
The recommended ratio for medium-sized devices is 50% Placement 50%.
提示: The screen size for medium-sized devices is defined in the
40.0625em
To
64.0624em
Between.
Used on medium-sized Devic
.medium-*
Class.
Now let’s add two columns to the medium-sized device:
<div class="small-3 medium-6 columns">....</div>
<div class="small-9 medium-6 columns">....</div>
以上实例设置了两个列，比例为 25% 和 75% (Foundation 是移动优先: 如果没有特别说明，在大型设备上会继承 .small 类的代码):
The proportion used on small devices is 25% and 75%. ( 注意: Make sure the columns add up to 12 columns! In the following example, we specify
.small-3
And
.small-9
). But the proportion used on medium-sized devices is 50% Universe 50%. (
.medium-6
And
.medium-6
). 8.34.1. Example ¶
<div class="row">
<div class="small-3 medium-6 columns"
style="background-color:yellow;">
<p>菜鸟教程</p>
</div>
<div class="small-9 medium-6 columns" style="background-color:pink;">
<p>菜鸟教程</p>
</div>
</div>
Used only on medium-sized Devic ¶
.medium-6
Class (not
.small-*
). This indicates a ratio of 50% to 50% on medium or large equipment. However, it will stack horizontally (100% width) on small devices: 8.34.2. Example ¶
<div class="row">
<div class="medium-6 columns" style="background-color:yellow;">
<p>菜鸟教程</p>
</div>
<div class="medium-6 columns" style="background-color:pink;">
<p>菜鸟教程</p>
</div>
</div>