3x脚手架配置vx响应式

最新推荐文章于 2024-08-04 16:33:59 发布

qq_41691865

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量132

点赞数

文章标签： postcss javascript 前端

本文链接：https://blog.csdn.net/qq_41691865/article/details/123074523

版权

1.需要注意的是: 询问配置 PostCSS 时需要选择的是 In dedicated config files 在专用配置文件中
2.新建文件.postcssrc.js，然后复制下面这段代码：

//https://github.com/michael-ciniawsky/postcss-load-config
// module.exports = {
//      plugins: {
//          autoprefixer: {}
//      }
// }
module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {}, 
      "postcss-write-svg": {
        utf8: false
      },
      "postcss-cssnext": {},
      "postcss-px-to-viewport": {
        viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750 
        viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置 
        unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除） 
        viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw 
        selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 
        minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值 
        mediaQuery: false // 允许在媒体查询中转换`px` 
      }, 
      "postcss-viewport-units":{},
      "cssnano": {
        preset: "advanced",
        autoprefixer: false,
        "postcss-zindex": false
      },
  }
}

3.使用npm安装

npm i cssnano postcss-aspect-ratio-mini postcss-cssnext postcss-px-to-viewport postcss-viewport-units postcss-write-svg -S             
npm i postcss-import postcss-url autoprefixer cssnano-preset-advanced -D

4.改动html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vuecli3vw</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vuecli3vw doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
    <script>
      window.onload = function () {
        window.viewportUnitsBuggyfill.init({
          hacks: window.viewportUnitsBuggyfillHacks
        });
  
        // var winDPI = window.devicePixelRatio;
        // var uAgent = window.navigator.userAgent;
        // var screenHeight = window.screen.height;
        // var screenWidth = window.screen.width;
        // var winWidth = window.innerWidth;
        // var winHeight = window.innerHeight;
        // alert(
        // "Windows DPI:" + winDPI +
        // ";\ruAgent:" + uAgent +
        // ";\rScreen Width:" + screenWidth +
        // ";\rScreen Height:" + screenHeight +
        // ";\rWindow Width:" + winWidth +
        // ";\rWindow Height:" + winHeight
        // )
      }
    </script>
  </body>
</html>

5.新建文件.browserlistrc，在里面添加下面代码

"browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11"
  ]
}

qq_41691865

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3x脚手架配置vx响应式

1.需要注意的是: 询问配置 PostCSS 时需要选择的是 In dedicated config files 在专用配置文件中2.新建文件.postcssrc.js，然后复制下面这段代码：//https://github.com/michael-ciniawsky/postcss-load-config// module.exports = {// plugins: {// autoprefixer: {}// }// }module.exports
复制链接

扫一扫