2018-07-25 14:04:34 qq_20567691 阅读数 4055
  • RIA编程-神奇的FLEX实战

    基于浏览器的富客户端编程,界面比Juery easy ui和extJS的更漂亮,操作更灵活! 而且FLEX的大优势是采用RPC模式,比AJAX速度更快。 在浏览器中播放视频,FLEX编程占据了垄断地位; FLEX还有push模式开发,是非常重要的技术! 这套 视频的开发环境是:myEclipse10+Flash builder4.6

    5254 人正在学习 去看看 肖海鹏

css flex布局iOS8兼容性问题,大多数情况下都能够通过兼容性写法解决,比如:

div {
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 1;
  flex: 1;
  flex-direction: row;
  -webkit-flex-direction: row;
}

如果以上兼容性写法还不能解决问题,那就要看看是不是webpack等自动化构建工具打包的时候导致部分css丢失。可以通过查看打包后的文件查看css内容是否丢失。如果发现是webpack打包导致css部分内容丢失,可以试试下面的解决方法,我这边通过下面的方法能够解决问题。

检查build目录下的utils.js 的cssloader是否有minimize: true选项,如下:

const cssLoader = {
  loader: 'css-loader',
  options: {
    sourceMap: options.sourceMap,
    minimize: true
  }
}

检查webpack.prod.conf.js是否用到OptimizeCSSPlugin插件,如果有,则去掉,如下:

// new OptimizeCSSPlugin({
//   cssProcessorOptions: $sourceMap
//   ? { safe: true, map: { inline: false } }
//   : { safe: true }
// })

在项目根目录下找到.postcssrc.js文件,将该文件内容替换为下面所示:

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-import": {},
    "autoprefixer": {
      browsers: [
        "last 10 versions",
        "ie >= 6",
        "ie_mob >= 6",
        "ff >= 10",
        "chrome >= 14",
        "safari >= 3",
        "ios >= 4",
        "android >= 4.0"
      ]
    }
  }
}

上面介绍的方法,主要针对的是webpack打包的时候,由于css插件优化导致部分css内容丢失的解决方法。

这里介绍个小技巧,在本地运行的页面,复制该页面的URL,如:http://127.0.0.1:8881/#/test,然后打开草料二维码,根据url生成二维码,用真机扫描二维码,如果真机上扫出来的页面与本地的一致,说明真机浏览器是支持这些css的。

下面主要总结一下只在iOS8上发现(目前只在iOS8上发现,其他浏览器还没发现问题)的一些比较坑的布局问题。

1.元素设置flex:1后,子元素height: 100%失效的问题。

 <div id="container">
    <div id="div1">
      <div style="height: 100%; background-color: green;color: white">11111</div>
    </div>
    <div id="div2">
      <div style="height: 100%;color:white;background-color: blue">22222</div>
    </div>
    <div id="div3">3</div>
    <div id="div4">4</div>
</div>
<style>
  #container {
    display: flex;
    height: 100%;
  }
  #div1 {
    flex: 1;
    background-color:yellow;
  }
  #div2 {
    flex: 1;
    background-color: red;
  }
  #div3 {
    flex: 1;
    background-color:yellow;
  }
  #div4 {
    flex: 1;
    background-color: red;
  }
</style>

如上,理论上,div1,div2,div3,div4会平分父容器container,并且div1会被背景色为绿色的子元素撑满,div2会被背景色为蓝色的子元素撑满。实际上,iOS8上的显示效果如图1所示。可见div1,div2的子元素的height: 100%失效了。解决方法可以通过给div1,div2设置position:relative,然后设置div1,div2的子元素position: absolute;height: 100%;width: 100%。问题即可解决。如图2。

 <div id="container">
    <div id="div1">
      <div style="height: 100%; background-color: green;color: white">11111</div>
    </div>
    <div id="div2">
      <div style="height: 100%;color:white;background-color: blue">22222</div>
    </div>
    <div id="div3">3</div>
    <div id="div4">4</div>
</div>
<style>
  #container {
    display: flex;
    height: 100%;
  }
  #div1 {
    posititon: relative;
    flex: 1;
    background-color:yellow;
  }
  #div1 div {
    position: absolute;
    height: 100%;
    width: 100%;
  }
  #div2 {
    position: relative;
    flex: 1;
    background-color: red;
  }
  #div3 div {
    position: absolute;
    height:height;
    width: height;
  }
  #div3 {
    flex: 1;
    background-color:yellow;
  }
  #div4 {
    flex: 1;
    background-color: red;
  }
</style>

图1 height:100%失效

   

 

图2 解决height:100%失效的问题​​​​​​

2.一个奇怪的css失效问题,至今没想明白原因。使用vue 的v-if指令切换元素的显示,同时元素的css是通过子元素选择器选择时,元素的布局失效。如下面代码所示:

<template>
  <div id="test">
    <div class="container">
      <div id="div1" v-if="!show">
        <div>左列</div>
        <div>右列</div>
      </div>
      <div id="div2" v-else>一列</div>
    </div>
    <div style="padding: 20px; text-align:center;background-color: red" @click="show=!show">切换</div>
  </div>
</template>
<style lang="less" scoped>
  .container {
    padding: 20px;
    & > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
</style>
<script>
  export default {
    data() {
      return {
        show: false
      }
    }
  }
</script>

按照代码所写,理论上,不管点击‘切换’按钮多少次,div1的布局永远都是两边对齐,即包括‘左列’的块在左边,包含‘右列’的块在右边。然而在iOS8上,页面第一次加载完成后,div1的布局确实是两边对齐,当点击‘切换’按钮后,div1的布局就失效了,如下图所示。目前只在iOS8发现这个问题。

图1 页面第一次加载完成时,div1两边对齐,布局正常

图2 点击‘切换’按钮,div1隐藏,div2 显示

图3.点击‘切换’按钮,div1显示,div2隐藏,此时div1布局异常

从图3可以看出,但div1再次显示时,div1的布局不再是两边对齐(图1所示)。iOS8出现这个bug的原因还没想明白,但可以稍微修改一下代码,就能解决这个问题,如下所示,使用class代替子元素选择器选择div1的布局:

<template>
  <div id="test">
    <div class="container">
      <div id="div1" class="row" v-if="!show">
        <div>左列</div>
        <div>右列</div>
      </div>
      <div id="div2" v-else>一列</div>
    </div>
    <div style="padding: 20px; text-align:center;background-color: red" @click="show=!show">切换</div>
  </div>
</template>
<style lang="less" scoped>
  .container {
    padding: 20px;
    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
</style>
<script>
  export default {
    data() {
      return {
        show: false
      }
    }
  }
</script>

 

2017-09-29 16:10:50 hicoldcat 阅读数 14972
  • RIA编程-神奇的FLEX实战

    基于浏览器的富客户端编程,界面比Juery easy ui和extJS的更漂亮,操作更灵活! 而且FLEX的大优势是采用RPC模式,比AJAX速度更快。 在浏览器中播放视频,FLEX编程占据了垄断地位; FLEX还有push模式开发,是非常重要的技术! 这套 视频的开发环境是:myEclipse10+Flash builder4.6

    5254 人正在学习 去看看 肖海鹏

最近在做项目时,使用到了flex布局。其他ios版本都还好,唯独在ios8上遇到了flex布局没起作用的问题。后来经过研究才发现,safari使用的是webkit内核,在ios8上需要单独加一下兼容才起作用。

display: flex;
display: -webkit-flex; 
justify-content: center;
-webkit-justify-content: center;
align-items:center;
-webkit-align-items: center;
...

坑到跳时方觉深啊!

2018-12-10 17:32:18 qq_39635302 阅读数 505
  • RIA编程-神奇的FLEX实战

    基于浏览器的富客户端编程,界面比Juery easy ui和extJS的更漂亮,操作更灵活! 而且FLEX的大优势是采用RPC模式,比AJAX速度更快。 在浏览器中播放视频,FLEX编程占据了垄断地位; FLEX还有push模式开发,是非常重要的技术! 这套 视频的开发环境是:myEclipse10+Flash builder4.6

    5254 人正在学习 去看看 肖海鹏
开启弹性布局
display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ 


-webkit-flex: 1;        /* Chrome */  
flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1  ;   /* OLD - iOS 6-, Safari 3.1-6 */  

副轴变主轴
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
flex-direction:column;
-webkit-flex-direction:column;


-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-box-pack:justify;
2018-02-06 08:29:56 yang450712123 阅读数 5666
  • RIA编程-神奇的FLEX实战

    基于浏览器的富客户端编程,界面比Juery easy ui和extJS的更漂亮,操作更灵活! 而且FLEX的大优势是采用RPC模式,比AJAX速度更快。 在浏览器中播放视频,FLEX编程占据了垄断地位; FLEX还有push模式开发,是非常重要的技术! 这套 视频的开发环境是:myEclipse10+Flash builder4.6

    5254 人正在学习 去看看 肖海鹏

ios9 以下 flex 兼容问题

详情描述

ios9 以下,display:flex 元素的第一级子元素必须是block,否则 flex 布局是不会生效的

2018-07-10 16:23:25 qq_38543537 阅读数 3299
  • RIA编程-神奇的FLEX实战

    基于浏览器的富客户端编程,界面比Juery easy ui和extJS的更漂亮,操作更灵活! 而且FLEX的大优势是采用RPC模式,比AJAX速度更快。 在浏览器中播放视频,FLEX编程占据了垄断地位; FLEX还有push模式开发,是非常重要的技术! 这套 视频的开发环境是:myEclipse10+Flash builder4.6

    5254 人正在学习 去看看 肖海鹏

有次和同事一起写了一个项目,一开始没想到这个flex布局的兼容问题,主要是之前也没遇到过。结果在测试的时候发现ios8以下版本居然不支持flex布局,包括justify-content这类属性,都不支持,最后只能用兼容性的写法,问题就解决了。

display: flex;

display: -webkit-flex;

justify-content: space-between;

-webkit-justify-content: space-between;

/*-webkit-box-align: center;*/

-webkit-align-items: center;

/*-ms-flex-align: center;*/

align-items: center;

加上-webkit-这个就好了。
没有更多推荐了,返回首页