<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0">-->
|
<meta name="viewport" content="width=device-width">
|
<meta http-equiv="X-UA-Compatible" content="IE=11">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
</head>
|
<body>
|
<noscript>
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
</noscript>
|
<div id="app"></div>
|
<!-- built files will be auto injected -->
|
<script type="text/javascript">
|
/* 这里我们利用了一个自执行函数 */
|
(function(){
|
change();
|
function change(){
|
console.log( document.documentElement.clientWidth*12/640 +'px')
|
//html的 font-size 的大小尺寸
|
//这里的html字体大小利用了一个简单的数学公式，当我们默认设置以屏幕320px位基准此时的字体大小为20px(320 20px),那么浏览器窗口大小改变的时候新的html的fontSize（clientWidth 新的值）就是clientWidth*20/320
|
document.documentElement.style.fontSize = document.documentElement.clientWidth/12 +'px';
|
}
|
/* 监听窗口大小发生改变时*/
|
window.addEventListener('resize',change,false);
|
})();
|
</script>
|
</body>
|
</html>
|
