Foundation 網格-中型設備
我們介紹了小型設備上我們使用 .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
) 。
實例
<div class="row">
<div class="small-3 medium-6 columns" stylex="background-color:yellow;">
<p>菜鳥</p>
</div>
<div class="small-9 medium-6 columns" stylex="background-color:pink;">
<p>菜鳥</p>
</div>
</div>
緊在中型設備上使用
以下實例中我們指定了 .medium-6
類 (不是 .small-*
)。這表明在中型或大型設備上比例為 50%/50%。但在小型設備上會水平堆疊 (100% 寬度):
實例
<div class="row">
<div class="medium-6 columns" stylex="background-color:yellow;">
<p>菜鳥</p>
</div>
<div class="medium-6 columns" stylex="background-color:pink;">
<p>菜鳥</p>
</div>
</div>
注意:
要保證數列加起來是 12 列!※Foundation 開關
※Foundation 滑塊
※Foundation 提示框
※Foundation Joyride編程
※Foundation 輸入框
TAG:程序員小新人學習 |
※如何檢查你的Iphone、Android及Windows設備存在Spectre Bug
※Google Lens將登陸更多Android設備
※Cisco 設備中的linux容器
※如何使用 TensorFlow mobile將PyTorch和Keras 部署到移動設備
※Zynga的《CSR Racing 2》AR模式進入Android設備
※Windows Lite系統爆料:將用於雙屏設備和Chromebook競品上
※在 Android 設備上運行 Linux
※索尼PS4 Remote Play正式登陸iPhone/iPad設備
※Facebook 發布視頻聊天設備 Portal,以及 Portal Plus
※John Carmack:Quest與Switch同為便攜遊戲設備,或成
※VRgineers將Leap Motion手勢追蹤集成到VRHero頭戴設備
※8.17 VR掃描:HTC宣布Viveport將支持Oculus Rift;OptiTrack推出新動捕設備
※Inclusive Technology發布通過滑鼠操縱iOS設備的適配器
※Google的「ARCore 1.2」實現對iPhone系統設備的兼容
※Valve宣布遊戲串流應用Steam Link Anywhere 不支持iOS設備
※Xometry推出為HP Multi Jet Fusion設備提供3D列印部件即時報價功能
※Molex 汽車功率輸出模塊充分利用Microchip Technology 的創新性設備
※CES 2019:Antilatency讓Oculus Go成為多用戶6DoF VR設備
※Phil Spencer表示希望讓Xbox Game Pass登陸更多設備
※Cradlepoint為AT&T提供5G路由器設備