rem 的使用
2024-10-13 06:27:09
1.填加以下代码
(function (designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid; function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width > maxWidth && (width = maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
// console.log('html{font-size:' + rem + 'px;}')
} if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
} refreshRem(750); win.addEventListener("resize", function () {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false); win.addEventListener("pageshow", function (e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false); if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function (e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 1024);
补充: em相对于父元素,rem相对于根元素。
简单版
(function () {
var docEl = document.documentElement;
var resize = 'orientationchange' in window ? 'orientationchange' : 'resize';
var setRem = function () {
var screenWidth = docEl.clientWidth || window.screen.width || 375;
// 1080 PSD宽度(可变的)
docEl.style.fontSize = (100 * screenWidth / 375) + 'px';
};
window.addEventListener('resize', setRem, false);
setRem();
})(); // 用法psd量出来的像素距离 除以100 比如psd: 100px 转换后 1rem;
最新文章
- python 核心编程课后练习(chapter 2)
- golang channel buffer
- 【three.js详解之二】渲染器篇
- Bluetooth Low Energy介绍
- Linux下的多线程编程
- 使用Ninject来解决程序中组件的耦合问题
- git push
- Android启动activity的4种模式(standard、singleTop、singleTask、singleINstance)
- Autodesk 2015全套密钥
- Android 获取屏幕分辨率
- 深入理解 Spring 事务原理【转】
- centos6.4、6.5、7.0环境下载及安装
- [其他]volatile 关键字
- 删除bin后,Eclipse重新编译项目
- mybatis插件机制
- Spyder Crashed During Last Session
- C++代码风格指南总结
- python的基础1
- Delphi 在DLL中使用DevExpress控件时出错解决办法
- Axure 实现数字自动加键功能(点击“+”数字加1,点击“-”数字减1)