首页 > 移动平台 > 详细

vue适配,pc和移动

时间:2020-04-04 00:14:50      阅读:153      评论:0      收藏:0      [点我收藏+]

PC适配:

  媒体查询 ,flex  rem         (PC适配主要使用媒体查询+百分比)

移动适配:

  主要使用  rem+flex    也有用JS代码断实现

 

vue脚手架 移动适配:

  核心思路-》根元素大小-页面尺寸和rem的关系

  1,将根元素的大小设置为屏幕宽度的1/10

  2,结合rerm  rem来实现响应式

  在index.html 里设置

    <script>

      //设置根元素字体大小

      document.documentElement.style.fontSize = document.documentElement.clientWidth/10+"px"

console.log(document.documentElement.style.fontSize)

    //监听屏幕尺寸的变化

    window.addEventListener("resize",()=>{

      document.documentElement.style.fontSize = document.documentElement.clientWidth/10+"px"

  })

    </script>

vue适配,pc和移动

原文:https://www.cnblogs.com/zzhqdkf/p/12629674.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!