rem布局--移动端页面自适应解决方案
只需在页面引入以下这段js代码,意思大概是:如果页面的宽度超过了640px,那么页面中html的font-size恒为100px,否则,页面中html的font-size的大小为: 100 * (当前页面宽度 / 640) 。设置为100px是为了好换算,哈哈哈,引入后写css文件时,若设置宽度为640px,可写成6.4rem
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = "orientationchange" in window ? "orientationchange" : "resize", scale = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=640){ docEl.style.fontSize = "100px"; }else{ docEl.style.fontSize = 100 * (clientWidth / 640) + "px"; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, scale, false); doc.addEventListener("DOMContentLoaded", scale, false); })(document, window);
声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。
- 上一篇: 移动端页面布局:百分比布局、rem布局
- 下一篇: rem自适应移动端布局