rem 布局动态 js封装动态获取屏幕宽度

REM自适应布局详解

最新推荐文章于 2023-10-31 23:00:00 发布

原创最新推荐文章于 2023-10-31 23:00:00 发布 · 1.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#页面布局 #前端 #rem布局

大前端咧专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨了REM单位在响应式网页设计中的应用，通过动态调整根元素字体大小实现不同设备上的布局自适应。介绍了使用媒体查询和JavaScript两种设置方法，并提供了具体的JS代码实现。

rem，实现宽高自适应布局

原理：根据的是html的font-size大小改变的，正是这样，可以在每个设备下面设置html的根字号，实现自适应布局

方法：使用媒体查询设置和使用js控制

下面介绍比较方便的js动态的设置rem：

在使用的时候需要引入该封装的 js文件（引用的时候一定要放在页面的最顶部）

（1）首先获取屏幕的宽度：w = window.innerWidth;

（2）动态设置rem的值：document.documentElement.style.fontSize= w/10 +'px'(这里把屏幕的宽度分为10份)

（3）实时的设置rem的值，使用onresize监听事件，window.onresie = setRem;

（4）注意:细节假设屏幕的最大为640，那么就需要判断如果宽度超过640的情况‘

代码如下

// 动态获取当前屏幕宽度， 根据屏幕宽度实时设置1rem的大小
function setRem() {
//获取屏幕的宽
var w = window.innerWidth; 
//假设你的页面最大的尺寸为640
if (w > 640) {
w = 640;
}
//设置rem的值
document.documentElement.style.fontSize = w / 10 + 'px'; 
}
setRem();
//当页面尺寸发生变化是，实时设置rem
window.onresize = setRem;

’