移动端css分辨率和物理设备分辨率处理

左手的ㄟ右手 2022-05-15 05:45 268阅读 0赞

正常项目分辨率处理：

vue项目分辨率处理：

## 安装PostCSS插件 ##

通过Vue-cli构建的项目，在项目的根目录下有一个`.postcssrc.js`，默认情况下已经有了：

module.exports = {
        "plugins": {
            "postcss-import": {},
            "postcss-url": {},
            "autoprefixer": {}
        }
    }

对应我们开头列的的PostCSS插件清单，现在已经具备了：

*  [postcss-import][]
 *  [postcss-url][]
 *  [autoprefixer][]

简单的说一下这几个插件。

### postcss-import ###

[`postcss-import`][postcss-import]相关配置可以[点击这里][postcss-import]。目前使用的是默认配置。只在`.postcssrc.js`文件中引入了该插件。

`postcss-import`主要功有是解决`@import`引入路径问题。使用这个插件，可以让你很轻易的使用本地文件、`node_modules`或者`web_modules`的文件。这个插件配合[`postcss-url`][postcss-url]让你引入文件变得更轻松。

### postcss-url ###

[`postcss-url`][postcss-url]相关配置可以点击[这里][postcss-url]。该插件主要用来处理文件，比如图片文件、字体文件等引用路径的处理。

在Vue项目中，[`vue-loader`][vue-loader]已具有类似的功能，只需要配置中将`vue-loader`配置进去。

### autoprefixer ###

[`autoprefixer`][autoprefixer]插件是用来自动处理浏览器前缀的一个插件。如果你配置了[`postcss-cssnext`][postcss-cssnext]，其中就已具备了`autoprefixer`的功能。在配置的时候，未显示的配置相关参数的话，表示使用的是[Browserslist][]指定的列表参数，你也可以像这样来指定`last 2 versions` 或者 `> 5%`。

如此一来，你在编码时不再需要考虑任何浏览器前缀的问题，可以专心撸码。这也是PostCSS最常用的一个插件之一。

### 其他插件 ###

Vue-cli默认配置了上述三个PostCSS插件，但我们要完成`vw`的布局兼容方案，或者说让我们能更专心的撸码，还需要配置下面的几个PostCSS插件：

*  [postcss-aspect-ratio-mini][]
 *  [postcss-px-to-viewport][]
 *  [postcss-write-svg][]
 *  [postcss-cssnext][]
 *  [cssnano][]
 *  [postcss-viewport-units][]

要使用这几个插件，先要进行安装：

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

安装成功之后，在项目根目录下的`package.json`文件中，可以看到新安装的依赖包：

"dependencies": {
        "cssnano": "^3.10.0",
        "postcss-aspect-ratio-mini": "0.0.2",
        "postcss-cssnext": "^3.1.0",
        "postcss-px-to-viewport": "0.0.3",
        "postcss-viewport-units": "^0.1.3",
        "postcss-write-svg": "^3.0.1",
        "vue": "^2.5.2",
        "vue-router": "^3.0.1"
    },

接下来在`.postcssrc.js`文件对新安装的PostCSS插件进行配置（暂时没有配置，不配置也有效果，配置了反而报错）：

module.exports = {
        "plugins": {
            "postcss-import": {},
            "postcss-url": {},
            "postcss-aspect-ratio-mini": {}, 
            "postcss-write-svg": {
                utf8: false
            },
            "postcss-cssnext": {},
            "postcss-px-to-viewport": {
                viewportWidth: 750,     // (Number) The width of the viewport.
                viewportHeight: 1334,    // (Number) The height of the viewport.
                unitPrecision: 3,       // (Number) The decimal numbers to allow the REM units to grow to.
                viewportUnit: 'vw',     // (String) Expected units.
                selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
                minPixelValue: 1,       // (Number) Set the minimum pixel value to replace.
                mediaQuery: false       // (Boolean) Allow px to be converted in media queries.
            }, 
            "postcss-viewport-units":{},
            "cssnano": {
                preset: "advanced",
                autoprefixer: false,
                "postcss-zindex": false
            }
        }
    }

> **特别声明：**由于`cssnext`和`cssnano`都具有`autoprefixer`,事实上只需要一个，所以把默认的`autoprefixer`删除掉，然后把`cssnano`中的`autoprefixer`设置为`false`。对于其他的插件使用，稍后会简单的介绍。

[postcss-import]: https://github.com/postcss/postcss-import
[postcss-url]: https://github.com/postcss/postcss-url
[autoprefixer]: https://github.com/postcss/autoprefixer
[vue-loader]: https://github.com/vuejs/vue-loader
[postcss-cssnext]: https://github.com/MoOx/postcss-cssnext
[Browserslist]: https://github.com/ai/browserslist
[postcss-aspect-ratio-mini]: https://github.com/yisibl/postcss-aspect-ratio-mini
[postcss-px-to-viewport]: https://github.com/evrone/postcss-px-to-viewport
[postcss-write-svg]: https://github.com/jonathantneal/postcss-write-svg
[cssnano]: https://github.com/ben-eb/cssnano
[postcss-viewport-units]: https://github.com/springuper/postcss-viewport-units