一、基础配置

1-1 安装依赖

  1. yarn add lib-flexible postcss-pxtorem

1-2 创建文件 postcss.config.js

  1. module.exports = {
  2.     plugins:{
  3.         "postcss-pxtorem":{
  4.             "rootValue":75,
  5.             "propList":["*"]
  6.         }
  7.     }
  8. }
  10. //4.修改postcss.config.js
  11. module.exports = {
  12.   plugins: {
  13.     //autoprefixer 自动补全css前缀的东西
  14.     'autoprefixer': {
  15.       //兼容的机型
  16.       browsers: ['Android >= 4.0', 'iOS >= 7']
  17.     },
  18.     'postcss-pxtorem': {
  19.       rootValue: 37.5, //换算基数，一般和html的font-size一致
  20.       propList: ['*']  //哪些css属性需要换算
  21.     }
  22.   }
  23. };

1-3 main.js引入

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import "lib-flexible/flexible.js"
  4. Vue.config.productionTip = false
  6. new Vue({
  7.   render: h => h(App),
  8. }).$mount('#app')

1-4 rem为移动端而生的要在pc和pad上跑动,一定要在App.vue文件中加

  1. <template>
  2.     <div id="app">
  3.         <router-view></router-view>
  4.     </div>
  5. </template>
  6. <style>
  8.  #app{
  9.     width:10rem;
  10.     margin-left:auto;
  11.     margin-right:auto;
  12. }
  13. </style>

1-5 样式重置

@符号接根路径

  1. import '@/assets/css/reset.css'
  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. b, u, i, center,
  7. dl, dt, dd, ol, ul, li,
  8. fieldset, form, label, legend,
  9. table, caption, tbody, tfoot, thead, tr, th, td,
  10. article, aside, canvas, details, embed, 
  11. figure, figcaption, footer, header, hgroup, 
  12. menu, nav, output, ruby, section, summary,
  13. time, mark, audio, video {
  14.     margin: 0;
  15.     padding: 0;
  16.     border: 0;
  17.     font-size: 100%;
  18.     font: inherit;
  19.     vertical-align: baseline;
  20. }
  21. /* HTML5 display-role reset for older browsers */
  22. article, aside, details, figcaption, figure, 
  23. footer, header, hgroup, menu, nav, section {
  24.     display: block;
  25. }
  26. body {
  27.     line-height: 1;
  28. }
  29. ol, ul {
  30.     list-style: none;
  31. }
  32. blockquote, q {
  33.     quotes: none;
  34. }
  35. blockquote:before, blockquote:after,
  36. q:before, q:after {
  37.     content: '';
  38.     content: none;
  39. }
  40. table {
  41.     border-collapse: collapse;
  42.     border-spacing: 0;
  43. }

二、Vant移动端适配

三、使用postcss-px-to-viewport

  • vw 与 vh单位，以viewport为基准，1vw 与 1vh分别为window.innerWidth 与 window.innerHeight的百分之一。
  • vw/vh 单位其实出现比较早了，只是以前支持性不太好，现在随着浏览器的发展，大部分（92%以上）的浏览器已经支持了vw/vh ```javascript npm i postcss-px-to-viewport -save -dev

//修改postcss.config.js module.exports = { plugins: { autoprefixer: { //兼容的机型 browsers: [‘Android >= 4.0’, ‘iOS >= 7’] }, //px转换为vw单位的插件 “postcss-px-to-viewport”: { //1vw = 3.2 viewportWidth: 320, //1vh = 5.68 viewportHeight: 568, // px to vw无法整除时，保留几位小数 unitPrecision: 5, // 转换成vw单位
viewportUnit: ‘vw’, //不转换的类名 selectorBlackList: [], // 小于1px不转换 minPixelValue: 1, //允许媒体查询中转换 mediaQuery: false, //排除node_modules文件中第三方css文件 exclude: /(\/|\)(node_modules)(\/|\)/
}, } }; ```