rem适配echarts/swiper

1、rem适配时swiper横向滚动swiper-slide会自动定高度,导致css样式高100%无效

解决:

将observe应用于Swiper的父元素。当Swiper的父元素变化时,例如window.resize,Swiper更新。

启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。
默认false,不开启,可以使用update()方法更新。

var swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    loop: true,
    autoplay: 3000,
    observer:true,  //
    observeParents:true,   //
    pagination: {
        el: '.swiper-pagination',
        clickable: false,
    },
});

2、echarts无法使用rem为单位

解决:页面header引入 echarts,外框正常大小,echarts可设置宽100%,高100%,而不是宽350px,高210px【ip4宽度320,导致echarts超出屏幕之外】

<script type="text/javascript">
        var d = document.documentElement;
        var cw = d.clientWidth || 750;
        document.documentElement.style.fontSize = (cw / 750 * 100) + 'px';
    </script>

 

posted @ 2021-01-30 11:16  蓝精灵61  阅读(868)  评论(0编辑  收藏  举报