web开发前端适配

移动端适配

修改根目录，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,既屏幕宽度的一半

打开浏览器，修改设备，如图所示