横屏与竖屏的排版问题

Passer

有6个图片按钮，横屏时需要2行3列，竖屏时需要3行2列，请问要如何处理？  谢谢！

liangyongfei

如果只是静态的6个图片，可参考：
随着分辨率自适应列数！UI2/system/components/bootstrap/row/demo/grid.w
设置class样式即可！在不同的分辨率下生效不同的样式！

如果是动态生成，可以看看照片墙的实现：/UI2/system/components/justep/list/demo/list.w

Passer

liangyongfei 发表于 2016-7-1 10:56
如果只是静态的6个图片，可参考：
随着分辨率自适应列数！UI2/system/components/bootstrap/row/demo/grid ...

谢谢！这个跟我想要的都不一样。我是想同一个设备上，竖屏时图片2列排列，横屏时图片3列排列。

liangyongfei

Passer 发表于 2016-7-1 14:47
谢谢！这个跟我想要的都不一样。我是想同一个设备上，竖屏时图片2列排列，横屏时图片3列排列。 ...

UI2/system/components/bootstrap/row
有没有看这个案例呢？？要求，！
可以设置class属性是
col-sm-4   表示每列占4等分 ，共3列    如果手机屏幕的高度是大于768 的
col-xs-6    表示每列占6等分 ，共2列    如果手机屏幕的高度 (<768px)   起作用！
如果屏幕的高度  一直是小于 768px   那就做不到了！

Passer

liangyongfei 发表于 2016-7-1 17:23
UI2/system/components/bootstrap/row
有没有看这个案例呢？？要求，！
可以设置class属性是

打包出来，在720p（小米2s）和1080p（荣耀6p）上面，横竖都是2列。感觉这个768，跟手机的真实分辨率是不一样的……

Passer

liangyongfei 发表于 2016-7-1 17:23
UI2/system/components/bootstrap/row
有没有看这个案例呢？？要求，！
可以设置class属性是

比如那个九宫格的例子，样式是“col cell col-xs-3 col-sm-2 col-md-2 col-lg-1”按理说在1080p的设备上应该就是6列了，结果还是显示4列。

liangyongfei

Passer 发表于 2016-7-2 09:43
比如那个九宫格的例子，样式是“col cell col-xs-3 col-sm-2 col-md-2 col-lg-1”按理说在1080p的设备上 ...

那你先试试在PC浏览器上，改变浏览器宽度的时候，是否可以正常起作用呢？？

Passer

liangyongfei 发表于 2016-7-4 11:57
那你先试试在PC浏览器上，改变浏览器宽度的时候，是否可以正常起作用呢？？ ...

模拟器里面选Nexus5时横屏的分辨率显示为598x335，我把按钮的宽度固定为167px，就可以横屏3列、竖屏2列了。也没有用row，直接6个span。

liangyongfei

Passer 发表于 2016-7-4 16:13
模拟器里面选Nexus5时横屏的分辨率显示为598x335，我把按钮的宽度固定为167px，就可以横屏3列、竖屏2列了 ...

好吧！你真机智

Passer

liangyongfei 发表于 2016-7-4 18:54
好吧！你真机智

没办法了……