1.按照UI设计图给的标准尺寸进行开发,css单位使用px;
2.将px根据当前font-size大小替换为rem;
3.当屏幕大小发生变化,实时改变font-size大小代码如下:
<script>
// 动态设置页面字体大小,使用rem
function resizeBaseFontSize () {
var html = document.documentElement; // 获取HTML文档大小
var proportion = html.clientWidth / 120; // 我开发的页面是1920设备,16px字体,所以我的比例是120
proportion = proportion < 9 ? 9 : proportion; // 从px单位转换rem单位的倍数
html.style.fontSize = proportion + 'px'; // 设置给当前根节点大小
html.style.minWidth = '1162px'; // 限制屏幕的最小尺度,可根据个人情况而定
}
// 当浏览器窗口大小改变的时候将会触发onresize事件
window.onresize = function () {
resizeBaseFontSize(); // 当浏览器大小改变时触发
};
resizeBaseFontSize(); // 页面初次加载触发
</script>
还有jQuery的写法
$(window).resize(function(){
resizeBaseFontSize();
});
主要是何时使用单位的思路,我刚开始写的时候不知道怎么下手处理px和rem。基本原则就是先写标砖屏幕,再根据比例进行单位替换。