关于移动端终极适配解决方案

一、使用 hotcss 移动端终极适配

1、下载 hotcss 地址：http://www.jq22.com/jquery-info11922

2、放入项目文件中，并引入 我们这里以 Vue 项目为例

　　

import Vue from 'vue'
import App from './App'
import router from './router'

// 移动端 hotcss 适配方案 
// 1、导入
import '../lib/hotcss/hotcss'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在 main.js 中引入hotcss.js 文件

二、配合使用 common.css 样式重置

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
// 样式重置 common.css
import "./assets/common.css"
export default {
  name: 'App'
}
</script>


<style lang="scss" scoped>

</style>

 在App.vue 中 引入 common.css 文件

三、引入并使用 px2rem.scss

1、可以配置项目宽度  如果设置一个组件的宽度为750的一半的话，以为着任何时候，无论移动端大小怎么变，组件大小依旧是屏幕的一半

@function px2rem($px){
    @return $px*320/$designWidth/20 + rem;
}
// 这里是具体项目的整体宽度
$designWidth : 750;

2、具体使用方法  拿一个组件举例子

<!-- 登录组件 -->
<template>
  <div class="login">
      <h1>登录页面</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  }
}

</script>

<style lang="scss" scoped>
@import "../../lib/hotcss/px2rem.scss";
h1 {
     px2rem(375);
    background-color: #c09;
    height: px2rem(40);
}
</style>

 这里设置 h1 标签的样式  大小的写法 px2rem(这里写需要设置的px大小，会转换为rem);

四、设置全局引入 px2rem.scss 方便使用

第一步：首先安装依赖包：

npm install --save-dev sass-loader

npm install --save-dev node-sass      //sass-loader依赖于node-sass

npm install sass-resources-loader --save-dev     //全局引入scss文件的依赖包

第二步：找到build/utils.js，找到 scss: generateLoaders('sass')，修改如下：

scss: generateLoaders('sass').concat(

      {

        loader: 'sass-resources-loader',

        options: {

          resources: path.resolve(__dirname, '../src/common/scss/index.scss')

        }

      }

    ),

如图所示：

 

修改成下图

 

 

最后npm run dev ,项目跑起来后，引进的scss文件里面的样式，变量等都可以在组件中使用了。

注意：如果是 vue-cli3.0的话 全局注意 scss 有另一个方法

文件根目录下 创建一个 vue.config.js 文件 写入如下代码 更改 scss 文件地址 再重启项目就ok啦

有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 vue.config.js 中的 css.loaderOptions 选项。比如你可以这样向所有 Sass 样式传入共享的全局变量：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: `@import "@/variables.scss";`
      }
    }
  }
}