关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

移动端适配问题

发布时间:2020-03-18 00:00:00

直接以750px设计稿为例:

        (function(designWidth, maxWidth) {var doc = document,
                win = window;var docEl = doc.documentElement;var remStyle = document.createElement("style");//获取基准字体大小function refreshRem() {// var width = parseInt(window.screen.width); // uc有bugvar width = docEl.getBoundingClientRect().width;if (!maxWidth) {
                    maxWidth = 750;
                };if (width > maxWidth) {
                    width = maxWidth;
                }var rem = width/designWidth*100;//得到的rem基准字体大小,这里乘以100是为了适配有的浏览器不识别小数,会导致设置字体无效。//设置根元素html的字体大小为基准字体大小,在css中每rem就是这个值的大小。remStyle.innerHTML = 'html{font-size:' + rem + 'px;} ';
            }
            refreshRem();if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(remStyle);
            } else {var wrap = doc.createElement("div");
                wrap.appendChild(remStyle);
                doc.write(wrap.innerHTML);
                wrap = null;
            }/* 以下为在不同的时机重新计算rem*/win.addEventListener("resize", function() {// clearTimeout(tid); //防止执行两次// tid = setTimeout(refreshRem, 50);                refreshRem()
            }, false);

            win.addEventListener("pageshow", function(e) {if (e.persisted) { // 浏览器后退的时候重新计算                    refreshRem()// clearTimeout(tid);// tid = setTimeout(refreshRem,50);                }
            }, false);
        })(750, 750);

另外找了两篇说的比较细的文章,链接如下:

https://www.cnblogs.com/hjptopshow/p/9382448.html

https://www.cnblogs.com/Sky-Ice/p/9596420.html


/template/Home/Zkeys/PC/Static