vue-cli适配，适用于移动端

YiLin_Classics

于 2022-07-11 13:32:27 发布

阅读量428

点赞数

分类专栏：问题踩坑合集文章标签： vue.js javascript css

原文链接：https://www.jianshu.com/p/5238e363344f

版权

问题踩坑合集专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何通过PostCSS及其插件实现移动端适配，包括px转vw、设置viewport、动态调整根字体大小等步骤，确保页面在不同设备上展示效果良好。同时，还涉及到了一些优化CSS的插件如cssnano，以及在实际项目中如何配置和使用。

摘要由CSDN通过智能技术生成

转载：https://www.jianshu.com/p/5238e363344f
第一步：使用脚手架创建完项目之后，安装插件

npm i postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url

第二步：然后再index.html里面加上：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

第三步：在项目根目录下添加.postcssrc.js文件，在里面写上以下代码：

module.exports = {
    "plugins": {
      "postcss-import": {},      //用于@import导入css文件
      "postcss-url": {},           //路径引入css文件或node_modules文件
      "postcss-aspect-ratio-mini": {},   //用来处理元素容器宽高比
      "postcss-write-svg": { utf8: false },    //用来处理移动端1px的解决方案。该插件主要使用的是border-image和background来做1px的相关处理。
      "postcss-cssnext": {},  //该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理。
      "postcss-px-to-viewport": {    //把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插件之一。
          viewportWidth: 750,    //视窗的宽度
          viewportHeight: 1334,   //视窗的高度
          unitPrecision: 3,    //将px转化为视窗单位值的小数位数
          viewportUnit: 'vw',    //指定要转换成的视窗单位值
          selectorBlackList: ['.ignore', '.hairlines'],    //指定不转换视窗单位值得类，可以自定义，可以无限添加
          minPixelValue: 1,    //小于等于1px不转换为视窗单位
          mediaQuery: false   //允许在媒体查询中使用px
      },
      "postcss-viewport-units":{}, //给vw、vh、vmin和vmax做适配的操作,这是实现vw布局必不可少的一个插件
      "cssnano": {    //主要用来压缩和清理CSS代码。在Webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它。
          preset: "advanced",   //重复调用
          autoprefixer: false,    //cssnext和cssnano都具有autoprefixer,事实上只需要一个，所以把默认的autoprefixer删除掉，然后把cssnano中的autoprefixer设置为false。
          "postcss-zindex": false   //只要启用了这个插件，z-index的值就会重置为1
       } 
    }
  }

第四步：当你切换不同尺寸的屏幕的时候，需要动态改变根字体的大小，一段简单的js插入在head里面：
我是在public目录下直接新建的shipei.js,然后将这个js引入到index.html的head里面。
shipei.js:

(function() {
   function autoRootFontSize() {
       document.documentElement.style.fontSize =        Math.min(screen.width,document.documentElement.getBoundingClientRect().width)  /  750 * 32 + 'px';
         // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750，乘以32；懂的起撒，就是原本是750大小的32px;如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化！是不是很简单
   }
   window.addEventListener('resize', autoRootFontSize);
   autoRootFontSize();
})();

第五步：
在index.html:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/public.css" type="text/css">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="/shipei.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>