기초 그리드 - 중형 기기


이전 장에서는 소형 장치에서 .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)。但在中型设备上使用的比例为 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% 比例 ，小型设备上比例是 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><div class="small-3 columns">...</div>

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

중간 크기 장치에서는 50%/50% 비율을 권장합니다.

팁: 중형 기기의 화면 크기는 40.0625em에서 64.0624em 사이로 정의됩니다.

중형 기기에서는 .medium-* 클래스를 사용하세요. 이제 중형 기기에 2개의 열을 추가합니다:

<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). 하지만 중급 기기에서는 50%/50%입니다. (.medium-6 및 .medium-6) . 🎜🎜🎜Instance🎜🎜
<!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% 너비) 스택됩니다. 🎜🎜🎜🎜Instances🎜🎜rrreee🎜🎜🎜인스턴스 실행 »🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜

←
→