zoukankan      html  css  js  c++  java
  • vue移动端适配

    1.安装插件

    npm i lib-flexible --save        // 载lib-flexible
    npm install px2rem-loader        // 安装px2rem-loader
    

      2.在main.js中引入lib-flexible

    import 'lib-flexible/flexible'
    

      3.在index.html中引入:移动适配meta标签

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

      4.更改配置

      在 build/util.js 中 按如下两更改

      (1)、将px2rem-loader添加到cssLoaders中

      const cssLoader = {
        loader: 'css-loader',
        options: {
          minimize: process.env.NODE_ENV === 'production',
          sourceMap: options.sourceMap
        }
      }
      const px2remLoader = {
        loader: 'px2rem-loader',
        options: {
          //一般设置75
          remUnit: 37.5 // 37.5按照375设计图尺寸在设计,75安装750设计图尺寸设计
        }
      }
    

      (2)、在generateLoaders方法中添加px2remLoader

    function generateLoaders(loader, loaderOptions) {
        const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
    
        if (loader) {
          loaders.push({
            loader: loader + '-loader',
            options: Object.assign({}, loaderOptions, {
              sourceMap: options.sourceMap
            })
          })
        }
    
        // Extract CSS when that option is specified
        // (which is the case during production build)
        if (options.extract) {
          return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader'
          })
        } else {
          return ['vue-style-loader'].concat(loaders)
        }
      }
    

      5.重启

    npm run dev
    

    以上实现转换适用于:

    (1)组件中编写的<style></style>下的css

    (2)从index.js或者main.js中import ‘../../static/css/reset.css’引入css

    (3)在组件的<script type=”text/ecmascript-6″> import ‘../../static/css/reset.css'</script>中引入css

    另外的情况不适用:

    (1)组件<style></style>中@import “../../static/css/reset.css (可考虑上面(2)、(3)的形式引入)

    (2)外部样式:<link rel=”stylesheet” href=”static/css/reset.css”>

    (3)元素内部样式:style=”height: 417px; 550px;”

    另外我要补充的是:在做移动端适配的时候我们不建议给字体也设置rem的单位,针对这种情况,我为字体适配的解决方案是使用媒体查询,文件以组件<style></style>中@import “../../static/css/reset.css形式引入,可完美解决移动端适配问题

  • 相关阅读:
    jmeter笔记5
    jmeter笔记4
    jmeter笔记3
    jmeter笔记2
    jmeter笔记1
    robot API笔记4
    robotframework笔记27
    robotframework笔记25
    robotframework笔记26
    robotframework笔记24
  • 原文地址:https://www.cnblogs.com/dyy-dida/p/11107639.html
Copyright © 2011-2022 走看看