Foundation Grid - 中型アプライアンス


前の章では、小型デバイスで .small-* クラスを使用してグリッド率を 25%/75% に設定することを紹介しました: .small-* 类来设置，网格比例为 25%/75%：

<div class="small-3 columns">....</div>
<div class="small-9 columns">....</div>

在中型设备上我们推荐的比例为  50%/50%。

提示: 中型设备的屏幕尺寸定义在 40.0625em 到 64.0624em 之间。

中型设备上使用 .medium-* 类。

现在我们在中型设备上添加两列：

<div class="small-3 medium-6 columns">....</div>
<div class="small-9 medium-6 columns">....</div>

以上实例设置了两个列，比例为 25% 和 75% (Foundation 是移动优先: 如果没有特别说明，在大型设备上会继承 .small 类的代码):

小型设备上使用的比例为 25%/75%  (.small-3 和 .small-9

< div><div class="small-3 列">....</div>.medium-6 和 .medium-6) 。

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>Foundation 网格</h2>
  <p>中型或大型设备上是 50%/50% 比例 ，小型设备上比例是 25%/75%。</p>
  <p>Resize the browser window to see the effect.</p>
  <div class="small-3 medium-6 columns" style="background-color:yellow;">
    <p>php中文网</p>
  </div>
  <div class="small-9 medium-6 columns" style="background-color:pink;">
    <p>php中文网</p>
  </div>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Note注意: 要保证数列加起来是 12 列!

紧在中型设备上使用

以下实例中我们指定了 .medium-6 类 (不是 .small-*<div class="small-9 列">....</div>

中型のデバイスでは、50%/50% の比率をお勧めします。

ヒント: 中型デバイスの画面サイズは、40.0625em から 64.0624em の間で定義されます。
中型デバイスでは .medium-* クラスを使用します。
ここで、中型デバイスに 2 つの列を追加します:
<div class="small-3 middle-6 columns">....</div> <div class="small-9 middle-6 columns">....</div>

上記の例では、25% と 75% の比率で 2 つの列を設定しています (基盤はモバイルです。優先順位:それ以外の場合、 .small クラスのコードは大きなデバイスに継承されます): 🎜🎜 小さなデバイスで使用される割合は 25%/75% (.small-3 および .small) -9)。ただし、ミッドレンジのデバイスでは 50%/50% です。 (.medium-6 および .medium-6) 。 🎜🎜🎜インスタンス🎜🎜
<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>Foundation 网格</h2>
  <p>中型或大型设备上是 50%/50% 比例 ，小型设备上是水平堆叠 (100%).</p>
  <p>重置浏览器窗口大小查看效果。</p>
  <div class="medium-6 columns" style="background-color:yellow;">
    <p>php中文网</p>
  </div>
  <div class="medium-6 columns" style="background-color:pink;">
    <p>php中文网</p>
  </div>
</div>

</body>
</html>
🎜🎜🎜インスタンスの実行»🎜🎜「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します🎜🎜
メモ注: シーケンスの合計数が 12 列であることを確認してください。

中程度で使用してください。 -サイズのデバイス🎜🎜 次の例では、.medium-6 クラス (.small-* ではありません) を指定しました。これは、中型または大型のデバイスでは 50%/50% の比率を示します。ただし、小型デバイスでは水平方向 (100% 幅) にスタックされます: 🎜🎜🎜🎜インスタンス🎜🎜rrreee🎜🎜🎜インスタンスの実行 »🎜🎜オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします🎜🎜

←
→