如何在 JavaScript 中理解和运用 rem 单位的计算与实现
最编程
2024-02-12 08:07:16
...
rem
1、定义
rem(font size of the root element)
是指相对于根元素的字体大小的单位。1rem
等于根元素 htm
的 font-size
,即只需要设置根元素的 font-size
,其它元素使用 rem
单位时,设置成相应的百分比即可。
2、如何实现
rem(倍数) = width / (html的font-size)=> width = (html的font-size) * rem(倍数)
只要 html
的 font-size
的大小变了,width
就会自动变,所以 rem
是通过动态设置 html
的 font-size
来改变 width
的大小,以达到网页自适应大小的目的
定义公式:rem(倍数) = width / (html的font-size),根据公式我们可以得出:
rem(倍数) = 设计稿宽度( imgWidth ) / 你设置的font-size( defalutSize )
rem(倍数) = 网页的实际宽度(screenWidth) / 你需要动态设置的font-size( x ) ,那么得出设置html的font-size的公式为:
<script type="text/javascript">
(function(w,d) {
function setSize() {
var screenWidth = d.documentElement.clientWidth;
var currentFontSize = screenWidth * 100 / 750;
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize',setSize);
w.addEventListener('pageShow',setSize)
w.addEventListener('DOMContentLoaded',setSize)
})(window,document)
</script>
function setHtmlSize(){
var pageWidth = window.innerWidth;
if(typeof pageWidth != "number"){
if(document.compatMode == "number"){
pageWidth = document.documentElement.clientWidth;
}else{
pageWidth = document.body.clientWidth;
}
}
var fontSize = (window.innerWidth * 100) / 750;
if(fontSize<40){
fontSize = 40;
}
//根据屏幕大小确定根节点字号
document.getElementsByTagName('html')[0].style.fontSize = fontSize + 'px';
}
function resize(){
setHtmlSize();
}
if (window.attachEvent) {
window.attachEvent("resize", resize);
} else if (window.addEventListener) {
window.addEventListener("resize", resize, false);
}
setHtmlSize();
3、以 750
宽度来算,1rem = 100px
,iphone6/7/8 plus
中设置 width: 6.5rem
元素的宽为多少?
plus
中宽度为 414
所以宽度为 414 / 750 * 6.5 * 1000.32 rem
为
414 / 750 * 0.32 * 100
推荐阅读
-
在React和Vue中,我们是如何玩转router的? - 使用HTML5 History API,React Router利用pushState和replaceState方法在不刷新页面的情况下管理导航历史。它像这样工作: 1. 当URL发生变化时,React Router悄悄地“监听”浏览器地址栏的改动,主要通过popstate事件来察觉url更改。 2. 随着URL的变化,Router会对照预先设定好的JavaScript路由配置对象,依据一套规则找出与当前URL匹配的路径。 3. 一旦找到合适的路线,React Router就会如魔法般地渲染相应的组件到网页上,从而实现了页面内容的实时更新。让我们来看一个React Router实际运用的例子。
-
如何在 JavaScript 中理解和运用 rem 单位的计算与实现
-
南邮OJ Web任务大揭秘:层层挑战剖析 1. 挑战一:迷宫般的目录探索 题目作者似乎穷举了所有可能的目录组合,最终在404.php中的