h5页面scss rem适配解决方案

一、h5 rem适配解决方案

在头部设置根字体

 <script>
    (function () {
            var docElem = document.documentElement;
            var dpr = window.devicePixelRatio || 1;
            var Layout = {
                w: 750,
                h: 1334,
                n: 16
            };

            function setRem() {
                //设置根字体大小
                document.getElementsByTagName("html")[0].style.fontSize = document.documentElement.clientWidth / 16 + 'px';
            };
            setRem();

            window.addEventListener('resize', setRem);
            window.addEventListener('pageshow', function (e) {
                if (e.persisted) {
                    setRem()
                }
            });
        })();
 </script>

@function rem($n){
    @return $n/(750/16)+rem;
}
img {
    width:rem(554);
    height:rem(423);
}

二、CSS -webkit-box-orient: vertical属性编译后丢失问题详解

        /*! autoprefixer: off */
        -webkit-box-orient:vertical;
        /*! autoprefixer: off */
或者
      /* autoprefixer: ignore next */
      -webkit-box-orient: vertical;