关于盒模型布局在UC上的兼容处理
这几天做移动项目,期间用了盒模型(flex)布局。在计算机上由于是用谷歌和火狐浏览器来调试,所以没发现什么问题,但是手机UC打开后,我整个人都不好了,盒模型布局全乱了。后来在网上查了一下关于盒模型的资料,发现大部分都说移动端不支持flex属性,更有甚者说只能换种布局方式。看到这些,我的内心是崩溃的,毕竟做了这么久的项目不能说改就改的。但是最终我还是找到了解决的办法,接下来跟大家分享一下我是如何解决这个问题的。下面是一个Demo,上代码先:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Demo for flex on uc</title> <style type="text/css"> html, body { padding: 0; margin: 0; } .demo1 { background-color: yellow; text-align: center; height: 80px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; /* for uc */ display: -webkit-box; -webkit-box-align: center; } .demo1>div { background-color: green; margin: 2px; -webkit-flex: 1; flex: 1; /* for uc */ -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; } .demo2 { background-color: yellow; width: 80px; height: 200px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; /* for uc */ display: -webkit-box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-box-align: center; } .demo2>div { background-color: green; width: 40px; margin: 2px; -webkit-flex: 1; flex: 1; /* for uc */ -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; } </style> </head> <body> <h2>左右排列,上下居中</h2> <div class="demo1"> <div>flex</div> <div>flex</div> <div>flex</div> <div>flex</div> <div>flex</div> </div> <h2>上下排列,左右居中</h2> <div class="demo2"> <div>flex</div> <div>flex</div> <div>flex</div> <div>flex</div> <div>flex</div> </div> </body> </html>
代码已经有了,接下来读者可以亲自体验一下UC浏览的效果咯!是不是已经是你们想要的效果了?
不过,这里还有一个问题,就是demo1里的div的宽度会随文字的多少改变,不是我们想要的等分布局效果。其实,有一个最简单的解决办法,就是在demo1下的div里添加一个属性:(width:0%;),即
.demo1>div { background-color: green; margin: 2px; width: 0%;/*初始宽度都设为0%,这样就能保证每个宽度都一样了*/ -webkit-flex: 1; flex: 1; /* for uc */ -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; }
然后你可以尝试将某个div里的文字增多,看看效果如何!
好了,这个问题就分享到这里了, 希望能给读者带来小小的帮助,也希望大神多多指导!!!