關於移動端終極適配解決方案
一、使用 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 {
width: 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";` } } } }
關於移動端終極適配解決方案