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