




雨林笔记-前端个人技术记录






Theme Mozz

web移动端rem适配代码

- 在`<head>`中插入js代码

<script>
            (function (docs, win) {
                var docEls = docs.documentElement,
                    resizeEvts = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalcs = function () {
                        win.rem = docEls.getBoundingClientRect().width / 25;
                        docEls.style.fontSize = win.rem + 'px';
                    };
                setTimeout(recalcs,1)
                if (!docs.addEventListener) return;
                win.addEventListener(resizeEvts, recalcs, false);
            })(document, window);
        </script>
 - 在全局样式表中插入css代码

<style>
                body,html{
                    margin: 0;
                    padding: 0;
                    font-family: -apple-system,Helvetica,sans-serif;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                    -moz-user-select: none;
                    -webkit-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                    background-color: #f6f7f9;
                    height: 100%;
                    max-width: 36rem;
                    margin: 0 auto;
                    position: relative;
                }
      </style>

- 在本代码下，最大宽度为36rem。元素的尺寸根据设计图的宽度换算即可。

Mac OS pc微信免扫码登陆

iview upload组件上传图片到七牛云

鲁ICP备18007154号-1