一、使用 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";` } } } }