vue移动端适配—手动rem适配
在index.html中<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,
·
- 在index.html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>mydemo</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<!--
在iphone 5 中1rem=16px;
html font-size =16px=1rem;
-->
<script>
//得到手机屏幕的宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
if(htmlWidth>750){
htmlWidth=750;
}
//设置根元素字体大小
htmlDom.style.fontSize = htmlWidth / 20 + 'px';
</script>
</body>
</html>
更多推荐
已为社区贡献19条内容
所有评论(0)