rem使用

最新推荐文章于 2023-10-16 22:17:02 发布

原创最新推荐文章于 2023-10-16 22:17:02 发布 · 4.8k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #rem

css 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何利用REM单位实现网页的自适应布局，详细解释了根据设计稿宽度设定REM值的方法，以及如何通过JS动态调整字体大小以适应不同屏幕尺寸，包括横屏和竖屏的处理方式。

目标：通过使用rem，使画面内容的高度和宽度自适应。

rem的值，根据设计稿来定。

假如设计稿的宽度是1920，你希望1rem=100px; fontsize=100px;

1.设定html节点的fontSize

屏幕宽度/设计宽度 = 1rem的值/预设定rem的值。

1920/1920=100/100 ;

所以 1rem=1920/1920*100 ;

document.documentElement 是html节点

document.documentElement.style.fontSize = ((windowWidth / designWidth) * rem2px) + 'px';

假如，用户将屏幕拖小了，变为960。1rem将自动变为50px;

960/1920*100=50

这里需要判断下，当屏幕的宽度大于设计稿定义的宽度，用设计稿的宽度，如果小于，用屏幕宽度作为变量屏幕宽度。

var windowWidth=(window.innerWidth>designWidth)?designWidth:window.innerWidth;

2.当有横屏竖屏区别时，需要写2套，对应CSS也要写2套，写js时，根据设计不同，区别显示。

if(window.screen.width < window.screen.height){
var designWidth = 750, rem2px = 100;
}else {
var designWidth = 1920, rem2px = 100;
}

对应css

js:
if(window.screen.width > window.screen.height){}

if(window.screen.width < window.screen.height){}

最终代码：

//------设置fontSize----------//
autofont();
function autofont(){
if(window.screen.width < window.screen.height){
var designWidth = 750, rem2px = 100;
}else {
var designWidth = 1920, rem2px = 100;
}

var windowWidth=(window.innerWidth>designWidth)?designWidth:window.innerWidth;
document.documentElement.style.fontSize =
((windowWidth / designWidth) * rem2px) + 'px';
}

3.设置完，可以使用了，当用户拖拽，界面宽度变化，需要写个js，判断是否需要重新计算rem的大小。

① 在公共js文件内写

//-------是否需要resize;--------//
var needResize=false; //如果需要就初始设置成true
var doResize; //定义一个函数，页面内部需要重新计算尺寸的，都写在这个函数内。
window.onresize=function(){ //当屏幕变化时
   autofont(); //重新计算rem
   if(needResize==true){ //如果界面内div需要重新计算大小
       doResize(); //执行这个函数
   }
}

②在各个界面css中，先引用公共的js文件。

var needResize=true；

doResize=function(){
   autofont();
   lsgcPieEcharts.resize();
   yxsPieEcharts.resize();
   mapEcharts.resize();
   bkspBarEcharts.resize();
   oilpieRise();
}

注：谷歌浏览器有最小字体限制，到一定字体大小之后就不会变小了。