關於移動端終極適配解決方案

1、使用 hotcss 移動端終極適配

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

二、放入項目文件中，並引入 咱們這裏以 Vue 項目爲例

　　

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

// 移動端 hotcss 適配方案 
// 一、導入
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 文件

 

2、配合使用 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 文件

 

3、引入並使用 px2rem.scss

一、能夠配置項目寬度  若是設置一個組件的寬度爲750的一半的話，覺得着任什麼時候候，不管移動端大小怎麼變，組件大小依舊是屏幕的一半

@function px2rem($px){
    @return $px*320/$designWidth/20 + rem;
}
// 這裏是具體項目的總體寬度
$designWidth : 750;

二、具體使用方法  拿一個組件舉例子

<!-- 登陸組件 -->
<template>
  <div class="login">
      <h1>登陸頁面</h1>
  </div>
</template>

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

</script>

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

 這裏設置 h1 標籤的樣式  大小的寫法 px2rem(這裏寫須要設置的px大小，會轉換爲rem);

 

4、設置全局引入 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";`
      }
    }
  }
}