根據font-size計算rem尺寸，動態縮放頁面
阿新 • • 發佈：2018-12-23
<html>
<head>
<title>Rem頁面縮放案例</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=10,user-scalable=no" />
</head>
<script>
/**
* 根據基礎字型大小 和 效果圖寬度設定 根節點字型大小
* @param baseFontSize 瀏覽器預設字型大小 [注]瀏覽器最小字型為12畫素，所以該值必需大於等於12
* @param baseWidth 設計稿的尺寸
*/
function initFontSize(baseFontSize, baseWidth){
// 獲取當前螢幕寬度
var clientWidth = document.documentElement.clientWidth || window.innerWidth;
// 根據寬度計算根節點字型大小
var size = Math.floor( clientWidth / baseWidth * baseFontSize );
document.querySelector('html').style.fontSize = size + 'px';
}
//初始化 字型100px , 設計稿寬640px
initFontSize(100, 640);
// 視窗大小改變時設定根節點字型大小，通過字型大小來控制頁面元素尺寸的縮放
window.addEventListener('resize', initFontSize);
</script>
<body>
<!--
瀏覽器預設字型大小為16px，1px 為( 1/16 )rem;
所以定義基礎字型大小為100px，1px 為( 1/100 )rem
-->
<div style="font-size: 0.12rem; width: 1.5rem; height: 1.5rem; background: red; color: #FFF; line-height: 0.3rem;">
如果字型大小為12畫素，則font-size 等於 12 * (1/10) rem
(寬150px * 高150px)
</div>
</body>
</html>
<head>
<title>Rem頁面縮放案例</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=10,user-scalable=no" />
</head>
<script>
/**
* 根據基礎字型大小 和 效果圖寬度設定 根節點字型大小
* @param baseFontSize 瀏覽器預設字型大小 [注]瀏覽器最小字型為12畫素，所以該值必需大於等於12
* @param baseWidth 設計稿的尺寸
*/
function initFontSize(baseFontSize, baseWidth){
// 獲取當前螢幕寬度
var clientWidth = document.documentElement.clientWidth || window.innerWidth;
// 根據寬度計算根節點字型大小
var size = Math.floor( clientWidth / baseWidth * baseFontSize );
document.querySelector('html').style.fontSize = size + 'px';
}
//初始化 字型100px , 設計稿寬640px
initFontSize(100, 640);
// 視窗大小改變時設定根節點字型大小，通過字型大小來控制頁面元素尺寸的縮放
window.addEventListener('resize', initFontSize);
</script>
<body>
<!--
瀏覽器預設字型大小為16px，1px 為( 1/16 )rem;
所以定義基礎字型大小為100px，1px 為( 1/100 )rem
-->
<div style="font-size: 0.12rem; width: 1.5rem; height: 1.5rem; background: red; color: #FFF; line-height: 0.3rem;">
如果字型大小為12畫素，則font-size 等於 12 * (1/10) rem
(寬150px * 高150px)
</div>
</body>
</html>