移动端封装rem

最新推荐文章于 2022-10-16 00:29:46 发布

小小飞肖

最新推荐文章于 2022-10-16 00:29:46 发布

阅读量144

点赞数

分类专栏：移动端

本文链接：https://blog.csdn.net/qq_32766999/article/details/101010504

版权

移动端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <title></title>
  </head>
  <style type="text/css">
    *{margin: 0px;padding: 0px}
  </style>
  <script type="text/javascript">
    /*
    UI设计稿是750px,现在是依据分为750px以下，与750px以上两个分支
    进行自适应
    2018/4/21
    移动端的适配，首先是ui提供的设计稿是750px,开发页面是375px,所以说比例达到1:2
    即如果ui提供的搞得宽度是185px,你所编写的页面的宽度应该是92.5px.
    通过一定的比例设置即可实现
    下面这两个方法缺一不可
    其一是当屏幕宽度发生变化的时候，会自动的改换成相应的比例
    其二是页面初次进入加载的时候；
    */
    (function() {
      var width = document.querySelector('html').offsetWidth
      if (width >= 750) {
        document.querySelector('html').style.fontSize = 100 + 'px'
      } else {
        document.querySelector('html').style.fontSize = 100 * (width / 750) + 'px'
      }
      window.onresize = function() {
        var width1 = document.querySelector('html').offsetWidth
        if (width1 >= 750) {
          document.querySelector('html').style.fontSize = 100 + 'px'
        } else {
          document.querySelector('html').style.fontSize = 100 * (width1 / 750) + 'px'
        }
      }
    })()
    /*
    ios禁止缩放
    */
    window.onload = function() {
      document.addEventListener('touchstart', function(event) {
        if (event.touches.length > 1) {
          event.preventDefault()
        }
      }, {
        passive: false
      })
      var lastTouchEnd = 0
      document.addEventListener('touchend', function(event) {
        var now = (new Date()).getTime()
        if (now - lastTouchEnd <= 300) {
          event.preventDefault()
        }
        lastTouchEnd = now
      }, false)
    }
  </script>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

小小飞肖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端封装rem

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/&gt...
复制链接

扫一扫

专栏目录