zoukankan      html  css  js  c++  java
  • 使用 rem 作为单位使页面自适应设备宽度

    一、新建 rem.js 文件,代码如下:

    export default function () {
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'
    
      // 禁止双击放大
      document.documentElement.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
          event.preventDefault()
        }
      }, false)
      var lastTouchEnd = 0
      document.documentElement.addEventListener('touchend', function (event) {
        var now = Date.now()
        if (now - lastTouchEnd <= 300) {
          event.preventDefault()
        }
        lastTouchEnd = now
      }, false)
    }


    二、在 main.js 中引用上述 rem.js 文件,使得 html 的 fontsize 始终为设备宽度的 1/10:

    import remConfig from './common/rem'
    
    remConfig() // 配置rem
    window.addEventListener('resize', function () {
      remConfig()
    })

    三、安装 px2rem-loader:

    npm i px2rem-loader

    四、配置 utils.js 文件,在 exports.cssLoaders = function (options) {} 里面添加下列代码:

    const px2remLoader = {
      loader: 'px2rem-loader',
      options: {
        remUnit: 75 // 设计稿宽度750px
      }
    }

    找到 generateLoaders 函数,奖函数中下列代码:

    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    改为:

    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    
    /* 或者改为 */
    
    // const loaders = [cssLoader, px2remLoader]

    五、配置完后重新 npm run dev,webpack就会自动将 css 中的 px 转换为 rem,如果 css 中的某些 px 不想被转换为 rem 可以在后面加上 /* no*/,如下(分号不能省略):

    border: 1px solid #ccc; /* no*/
    fontsize: 16px; /* no*/

    但调用的外部 css 文件中的 px 不会被转换,内联样式中的 px 也不会被转换。

  • 相关阅读:
    sql server 查询出的结果集,拼接某一列赋值给一个变量
    sql server显示某一列中有重复值的行
    webservice 尝试加载 Oracle 客户端库时引发 BadImageFormatException。如果在安装 32 位 Oracle 客户端组件的情况下运行,将出现此问题
    Merge Into 用法
    修改TFS与本地源代码映射路径
    Thinkphp5.0第五篇
    aircrack-ng wifi密码破解
    Thinkphp5.0第四篇
    Thinkphp5.0第三篇
    Thinkphp5.0第二篇
  • 原文地址:https://www.cnblogs.com/programs/p/10364200.html
Copyright © 2011-2022 走看看