移动端适配
修改根目录,index.html,设置屏幕宽度位20rem,可根据项目需求自定义
<script> function gethtmlfontsize(){ // 三个步骤: // 1.获取html的宽, let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;//有些浏览器documentElement获取不到,那就使用后面的body console.log(htmlwidth); // 2.htmlDom let htmlDom=document.getElementsByTagName("html")[0] console.log(htmlDom); //3.设置根元素样式 htmlDom.style.fontSize=htmlwidth/20+'px'; } // 调用一次 gethtmlfontsize(); // 添加监听事件(resize是监听的意思) window.addEventListener('resize',gethtmlfontsize) </script>
完整代码
这个是vue中测试的html效果是一样的,新增一个div标签,设置背景颜色和宽度,示例设置div宽度位10rem,既屏幕宽度的一半
、打开浏览器,修改设备,如图所示