기초 그리드 - 대형 장치


이전 장에서는 중형 디바이스와 소형 디바이스의 그리드 레이아웃을 소개했습니다. 소형 디바이스에서 사용되는 비율은 25%/75%(.small-3 및 .small-9)이지만 중형 디바이스에서는 사용되는 비율입니다. 크기 장치는 50%/50%(.medium-6 및 .medium-6)입니다.

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

대형 기기에서 권장 비율은 33%/66%입니다.

팁: 대형 장치의 화면 크기 정의는 64.0625em보다 큽니다.

대형 장치에서는 .large-* 클래스를 사용하세요. .large-* 类。

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

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

解析

  • 小型设备两个列的比例为  25%/75% (.small-3 和 .small-9)

  • 中型设备两个列的比例为 50%/50%  (.medium-6 和 .medium-6)

  • 大型设备两个列的比例为 33%/66%  (.large-4 和 .large-8)

实例

<!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>大型设备上的比例为 33%/66%， 中型设备比例为 50%/50% ，小型设备比例为 25%/75% 。</p>
  <p>重置浏览器窗口大小查看效果。</p>
  <div class="small-3 medium-6 large-4 columns" style="background-color:yellow;">
    <p>php中文网</p>
  </div>
  <div class="small-9 medium-6 large-8 columns" style="background-color:pink;">
    <p>php中文网</p>
  </div>
</div>

</body>
</html>

运行实例 »

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

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

紧在大型设备上使用

以下实例中我们指定了 .large-6 类 (不是 .medium-* 和 .small-*

이제 대형 장치에 두 개의 열을 추가합니다:

<div class="small-3 Medium-6 Large-4 columns">.....</div>
<div class=" small -9 중형-6 대형-8 열">...</div>

분석

둘의 비율 대형 장비의 열은 33%/66%입니다(.large-4 및 .large-8)🎜🎜🎜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="large-6 columns" style="background-color:yellow;">
    <p>php中文网</p>
  </div>
  <div class="large-6 columns" style="background-color:pink;">
    <p>php中文网</p>
  </div>
</div>

</body>
</html>
🎜🎜🎜인스턴스 실행 »🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜
Note🎜참고:🎜 꼭 확인하세요 숫자 순서를 합하면 최대 12개의 열이 됩니다!< /td>

대형 장치에서 밀접하게 사용하세요🎜🎜다음 예에서는 를 지정합니다. Large-6 클래스(.medium-* 및 .small-* 아님). 이는 대형 장치에서 50%/50% 비율을 나타냅니다. 하지만 중형 또는 소형 장치에서는 수평으로(폭 100%) 스택됩니다. 🎜🎜🎜Instances🎜🎜rrreee🎜🎜🎜인스턴스 실행 »🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜