美文网首页
h5 移动端适配

h5 移动端适配

作者: 陈海辉 | 来源:发表于2020-08-20 15:21 被阅读0次

    字体大小

    设置 html 的 fontSize(设计稿 375px)

    ;(function (doc, win) {
      var docEl = doc.documentElement
      var resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize'
      // 添加监听事件
      win.addEventListener(resizeEvt, refreshRem, false)
      doc.addEventListener('DOMContentLoaded', refreshRem, false)
      // 执行 设置 html 的 fontSize
      refreshRem()
    
      function refreshRem() {
        var clientWidth = win.innerWidth || doc.documentElement.clientWidth || doc.body.clientWidth
        // 当设备宽度为375(iPhone6)时,根元素font-size=16px;
        clientWidth && (docEl.style.fontSize = (16 * clientWidth) / 375 + 'px')
      }
    })(document, window)
    

    设置 px 转 rem(vue.config.js)

    // npm i postcss-px2rem
    const px2rem = require('postcss-px2rem')
    const postcss = px2rem({ remUnit: 16 }) //基准大小 baseSize,需要和rem.js中相同
    module.exports = {
      css: {
        loaderOptions: {
          postcss: {
            plugins: [
              postcss, // 添加到插件里
            ],
          },
        },
      },
    }
    

    安卓字体不居中

    <!-- 设置 lang 属性 -->
    <html lang="zh-cmn-Hans">
      <head>
        <style>
          body {
            // 设置中文字体(第三方UI库可能修改到字体)
            font-family: sans-serif !important;
          }
        </style>
      </head>
    </html>
    

    相关文章

      网友评论

          本文标题:h5 移动端适配

          本文链接:https://www.haomeiwen.com/subject/ieosjktx.html