用户登录

Semantic UI 推荐我们使用 doubling ,让栏的宽度在小尺寸的设备上加倍 .. 使用 stackable .. 让栏与栏在手机上堆叠在一起显示 ..

我们也可以手工的去设置每栏内容在不同尺寸的设备上的宽度 .. 这里同样需要用到表示电脑的 computer .. 表示平板的 tablet .. 表示手机的 mobile 这些单词 ..

下面我们去设置一下 1 号栏在这些设备上的不同的宽度 .. 让它在手机上占用 16 个宽度 .. 输入 sixteen wide mobile .. 让它在平板上占用 4 个宽度 .. 所以需要用一个 four wide tablet .. 在电脑上,让它占用 8 个宽度 .. 再输入 eight wide computer ..

保存 .. 现在页面的宽度适合普通电脑 .. 所以 1 号栏会占用 8 个宽度 .. 也就是 eight wide computer ..

再调整一下页面的宽度 .. 在平板电脑这个尺寸的范围内 .. 1 号栏的会使用 4 个宽度 . four wide tablet ..

最缩小一下页面的宽度 .. 在一般的手机尺寸的范围里边儿 ... 这个栏的宽度会是 16 .. 也就是 sixteen wide mobile ..

不同设备上的栏的宽度《 Semantic UI 网格 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点