做一个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;

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://dengtar.com/20953.html