HTML开发移动端适配大小屏幕

在head里面先添加

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=0">

然后再添加：

<!-- 小屏幕处理 -->
<script>
    // 设置fontSize
    initFontSize()
    // 变化的时候，修改fontSize
    window.onresize = () => {
        initFontSize()
    }
    function initFontSize() {
      var html = document.getElementsByTagName("html")[0];
      const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      // 375 -> fontSize = 16px
      html.style.fontSize = clientWidth / 375 * 16 + 'px';
    }
</script>

注意，这时候css里面使用的不是px而是rem ，现在一般UI稿都是按照iPhone 6的尺寸，也就是 375 x 667 ，（有的是@2x，自行除以2，如果不是这个375宽度或者倍数，让UI修改）；

我使用的开发工具是VSCode，里面有个插件"px to rem"，这个插件可以 "px"和"rem"相互转换，默认fontSize是16px （375 x 667 屏幕的html，fontSize 都是按照16px 计算），推荐使用；

HTML开发 移动端适配大小屏幕

HTML开发移动端适配大小屏幕