在全局样式中为html设置默认字体大小
.html{
font-size: 100px;
}
在index.html中动态获取屏幕宽度，重新定义html的字体大小
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<script>
// 获取当前设备宽度
let deviceWidth = document.documentElement.clientWidth || window.innerWidth
// 动态设置html的字体大小 375是我们的设计稿宽度
document.getElementsByTagName('html')[0].style.fontSize = (deviceWidth / 375) * 100 + 'px'
</script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
/*
img-cnt是包裹图片的外围盒子容器的class
如果图片原尺寸是375px * 180px
默认html的font-size为100px 那么 1rem = 100px
如果我们的屏幕宽度变为 390px 那么html的font-size值为(390/375) * 100 + 'px' = 104px
此时 1rem = 104px
那么 3.75rem = 3.75 * 104px = 390px
*/
.img-cnt {
width: 3.75rem;
height: 1.8rem;
img {
width: 100%;
height: 100%;
}
}
网友评论