PC端自适应使用rem

最新推荐文章于 2025-06-18 11:54:03 发布

前无止境CSND

最新推荐文章于 2025-06-18 11:54:03 发布

阅读量1.9w

点赞数 17

CC 4.0 BY-SA版权

分类专栏：自适应文章标签： rem 自适应 PC

本文链接：https://blog.youkuaiyun.com/weixin_44999830/article/details/89852665

自适应专栏收录该内容

2 篇文章

订阅专栏

该博客介绍使用REM实现网页自适应。在PC端，通过JS修改HTML的FONT - SIZE值，使内容大小和位置随窗口变化；移动端在页面载入时设置一次即可，设备宽度超1080则按PC处理。还介绍了移动端适配升级版，如用sublime可下载cssrem工具，vscode也有对应转换工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做一个PC端的网页，设计图是1920X1080，要在常见屏上显示正常，比如：1280X720 1366X768 1440X900 1920X1080。
就要使用REM，width、height、margin、padding、left、top都采用了REM,
**注意：**HTML的FONT-SIZE设置的为100PX.是为了计算方便.此时BODY的FONT-SIZE要设置为正常值,例如14PX.不然的话,其它的DOM都会继承HTML的100PX的FONT-SIZE,导致效果巨大.

1、PC端
当浏览器窗口变化时,内容的大小以及相对位置也会相应变化,这个依靠JS修改HTML的FONT-SIZE值实现.如下:

;(function(win) {
    		var tid;
    		function refreshRem() {
    			let designSize = 1920; // 设计图尺寸
    			let html = document.documentElement;
    			let wW = html.clientWidth;// 窗口宽度
    			let rem = wW * 100 / designSize; 
    			document.documentElement.style.fontSize = rem + 'px';
    	    }
	     
	    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);

	    refreshRem();

	})(window);

计算font-size的逻辑是：
当设计图是1920时,规定HTML的FONT-SIZE的值是100. 也就是,当浏览器窗口调整到1920PX时,1REM=100PX,如果要设定一个160PX(1920设计图时)的margin-top,那么REM设置值是1.6rem.

2、移动端

由于手机上一般不会调整浏览器大小,所以可以在页面载入时,设置一次即可

$(function(){

  let designSize = 750; // 设计图尺寸

  let html = document.documentElement;

  let wW = html.clientWidth;// 窗口宽度
  let rem = wW * 100 / designSize; 

  document.documentElement.style.fontSize = rem + 'px';
})

使用REM能够较好的自适应移动端

手机平板移动设备的宽度不超过1080,如果设备已经超过了这个宽度,则不应再计算html的font-size值了.因为已经是PC屏幕了.

if ( window.innerWidth>1080)

return;

3、移动端适配升级版
首先我使用sublime进行开发，可以先在github上下载css转rem工具代码：cssrem
链接：https://github.com/flashlizi/cssrem
设置px_to_rem为37.5，可以写死，意思就是使用ipone6屏幕尺寸进行开发
vscode可以使用px to rem & rpx (cssrem)进行转换。修改默认16px为18.75

rem代码：放在JS中

(function(win) {
	var docEl = win.document.documentElement;
	var tid;

	function setRemUtils() {
		// 获取rem基准值
      var rem = docEl.clientWidth / 20;// 窗口宽度，如果是750设计图，则将10改为20
      // 动态设置html根元素的font-size 
      docEl.style.fontSize = rem + 'px';
  }

  setRemUtils();

  // 窗口变化时触发
   win.addEventListener('resize', function() {
   	clearTimeout(tid);
   	tid = setTimeout(setRemUtils, 300);
   }, false);
   win.addEventListener('pageshow', function(e) {
   	if (e.persisted) {
   		clearTimeout(tid);
   		tid = setTimeout(setRemUtils, 300);
   	}
   }, false);
})(window)