一、原理:
虽然大家都喜欢直接拿代码,但是原理还是不得不说的。走的越远,越发现理论的重要性。
关键知识:
1:rem是定义在html元素上面的,并且必须设置font-size(别和我扣,我也知道body上面也可以)
2、浏览器内用rem就必须在初始的html元素上面定义fontSize大小,并且需要设置随着页面变化fontSize也会随之变化
这里很多新手都不知道,直接拿来用虽然看着没问题,但是你得页面不是响应式的。
3、举例:1rem=30px 则页面下面所有使用rem单位的元素字体都以30px为基准单位,会被换算。
4、浏览器字体坑:谷歌浏览器字体最小设置10px,也就是说你rem的值变化到了10px以下的时候页面也不在是响应式而是以10位基准单位。
每个浏览器都不一样,所以rem变化的值最好都比浏览器最小字体大。通常来说不小于16px吧(错了就自己console下)
5、实现原理:参考小程序rpx单位,将页面分割为自定义的相等份。假如页面定义分割为50份,页面像素1000px,则1rem等于20px。这就是原理。
说白了就是页面分割为50份,每份20px,那么你在使用的时候就是1rem=20px
小程序也是同样的原理,不过小程序是把页面分割为750份。
6、手机似乎不存在最新字体问题,但建议不要小于10px
二、实现
1、最简单的实现方式,用css方式,但是建议在谷歌浏览器下,并且隐藏滚动条,否则pc(电脑)端不合适。
该方式比较适合手机端,因为手机端滚动条等于没用,说白了就是完全可以隐藏的。
代码:
/*实现类似小程序rpx语法,用rem替代px,将页面拆分为50份,然后再进行使用
以下css适合谷歌浏览器,需要配合::-webkit-scrollbar进行滚动条隐藏
*/
/*html{
font-size: calc(100vw / 50);
}
!*css隐藏滚动条不支持ie*!
::-webkit-scrollbar {display:none}*/
2、兼容所有浏览器,但是性能等略微下降,浏览器流畅需要非常非常仔细才能体验出来(用户才不会知道这呢)。不影响体验。
以下代码是自己写的,参考了淘宝rem。但是可以自己多研究,发现问题不大。如果需要改为适应手机端的则把50改为20以下数字。
说实在这个代码适合pc端,不适合手机端。(个人感觉,不觉得上面的代码简单到爆吗?)
responsive() { rem(); //响应式代码解决方案,rem处理 //rem事件监听,保证响应式触发 window.addEventListener("resize", rem); window.addEventListener("pageshow", function(e) { //前进后退事件,移动端,暂时没啥用 if (e.persisted) { rem(); } }); function rem() { //rem修改 //多减去1,不行则2,因为浏览器滚动条会更宽1像素 //是否减去滚动条宽度,请各位根据自己的页面进行改动,以下代码是无论如何都会减去滚动条宽度的 let width: number = window.innerWidth - getScrollWidth() - 1;
document.getElementsByTagName("html")[0].style.fontSize = width / 50 + "px"; console.log(width); /* document.body.clientWidth,document.body.offsetWidth document.body.offsetWidth 获取body元素对象的宽度, 即offsetWidth=width+padding+border, 也可以写成offsetWidth=clientWidth+border */ function getScrollWidth() { //获取页面滚动条宽度 var noScroll, scroll, oDiv = document.createElement("DIV"); oDiv.style.cssText = "position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;"; noScroll = document.body.appendChild(oDiv).clientWidth; oDiv.style.overflowY = "scroll"; scroll = oDiv.clientWidth; document.body.removeChild(oDiv); return noScroll - scroll; } } }
三、注明
参考:淘宝rem https://github.com/amfe/lib-flexible(未处理滚动条问题,因为淘宝用于手机端)
rem:https://www.html.cn/book/css/values/length/rem.htm
四、废话
最近学typescript,感觉好苦逼啊,这玩意真的虐自己。
看文章的刷新下,我可能会修改错误的地方