手机前端开发 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

手机前端开发

杨冬芳 2016-06-15 17:10:26 1215
/*---仿-table---*/
.flex-out{
  /*display: -webkit-box;*/    /*放在第一行不能适应电脑游览器,手机无问题。*/
  display: -moz-box; /* Firefox 17- */
  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  display: -moz-flex; /* Firefox 18+ */
  display: -ms-flexbox; /* IE 10 */
  display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ 
  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
}
.flex-in{
     -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
     -moz-box-flex: 1;         /* OLD - Firefox 19- */
     -webkit-flex: 1;          /* Chrome */
     -ms-flex: 1;              /* IE 10 */
     flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
}
<div class="flex-out">
    <div class="flex-in" style="width:46%;">          
        <img src="http://cca.mbaobao.com/mbaobao/201410/09/qj_04.jpg" width="100%" >               
        <img src="http://cca.mbaobao.com/mbaobao/201410/09/qj_06.jpg" width="100%" >        
    </div>
    <div class="flex-in" style="width:54%;">
        <img src="http://cca.mbaobao.com/mbaobao/201410/09/qj_05.jpg" width="100%" >
    </div>
</div> 

代码如上,需求很简单只要让上面的这组div能实现table的效果就好;让手机能实现适应多种屏幕的大小,图片被设置成了100%;

出现的问题在于pc的游览器和手机游览器显示效果不同,但是把 display: -webkit-box; 移动到最后一行是无问题的。
我知道为什么这样可行,但是我不知道这样修改后会不会引发别的什么问题(经过测试是没问题的),但是感觉样式还是怪怪的。希望谁能回答下我的几个问题
•display:flex;具体运用在什么方法面
•我现在这样写会引发什么问题
•上面这个样式的由来

Web App开发 前端开发 Android开发 iOS开发
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:39:46

    display:flex; 是一种 CSS3 属性,用于多行多列布局,类似 table,但是有更大的灵活性。目前移动端只有最新的浏览器支持,如 Chrome、Firefox等。Android 4.1 的内置浏览器不支持,微信浏览器使用的 WebView 等都只有在最新的系统上才支持,如 4.3、4.4 等,具体细节你可以再去确定。

    2.display: -webkit-box;是一种特别适合微信内置浏览器的布局方式。

    3.移到最后一行没有问题,是因为这时候 display: -webkit-box; 会把前面的 display: flex; 覆盖掉。

    0 0

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程