1.在你写移动端页面的时候就应该想清楚为什么要用 rem
为啥不用px,因为px是定死的宽高,不管哪种设备宽高的显示效果都是一样的。
这样就出现问题了,如果我们在750px手机上
写一个 400px宽度div
可能刚好合适 但是 在650px宽度的手机上呢 是不是有点长了
所以在设备宽度变小的情况下 750px手机上的元素都应该按比例的缩小一点 才能达到和750px 上面一样的显示效果
这个时候就需要的一个相对的单位了 而不是一个定死的单位
这时候rem布局就 来了 他的单位就是相对于根 html元素的字体大小设置 而且这个字体大小我们可以自行更改
之前有讲过 rem的 简单入门 可以看之前的博客
https://blog.csdn.net/yunchong_zhao/article/details/104854398 // 博客地址
2.然后在了解一个东西 浏览器的窗口尺寸问题
浏览器窗口的尺寸(就是内容部分,可以看见的部分,不包括工具栏和滚动条)
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的可见高度
window.innerWidth - 浏览器窗口的可见宽度
对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
兼容所有浏览器:
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
3.代码展示
把下面的代码拷贝到一个rem.js文件中,在页面引入使用 最好放到最上面的js引入
(function PageResize(){
(function getResize(){
var width=window.innerWidth||window.documentElement.clientWidth||window.body.clientWidth;
width>750?width=750:null;
width<320?width=320:null;
document.documentElement.style.fontSize=(width*(100/750))+'px';
if(!window.onresize){
window.onresize=function(){
delayFunc(getResize);
}
}
})()
// 延迟计算加个延迟是为了 当窗口发现变化 页面不是瞬间变化 有个变化的延迟 用户体验更好
var timer;
var delayFunc=function(fn){
var delay=300;// 根据实际情况可调整延迟时间
// 这里延时执行你的函数
timer=setTimeout(function(){
fn();
},delay);
};
})();
本来想直接放代码就成了呢,想了想真正帮人,是授人以鱼不如授人以渔!