关于postcss-px-to-viewport的使用经验

最新推荐文章于 2024-08-09 10:08:47 发布

An_cf

最新推荐文章于 2024-08-09 10:08:47 发布

阅读量6.3k

点赞数

分类专栏：前端开发文章标签： postcss css javascript

本文链接：https://blog.csdn.net/An_cf/article/details/122259597

版权

本文介绍了在使用postcss-px-to-viewport时如何适配不同分辨率终端，特别是1920*1080和1200*1920的情况。通过配置landscapeWidth遇到报错问题，作者分享了解决方法，包括修改依赖包、锁定postcss版本和更新postcss到最新版本。这些经验可供遇到相同问题的开发者参考。

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

最近在工作项目使用中新接触到postcss-px-to-viewport，在使用上遇到一个坑，也有段时间没更新啦，记录分享一下~希望对你有所帮助！

直接上重点，节省在网站苦苦寻找有效答案的你 >>>

我所遇到的坑：

由于项目需要，需要适配不同分辨率的终端设备，比如我接到的项目需求是1920*1080以及1200*1920；如果使用过postcss-px-to-viewport的话，我们知道适配一种尺寸在配置时设置viewportWidth就可以，那如果适配两种呢？

一开始我想到的是我们常用的@media screen and （max-width: 1200px）去做兼容，但真正使用后会发现这样字体大小是不能够适配的，那有什么办法能同时适配两种分辨率的终端呢，当终端尺寸差距比较大的情况？

然后我们去查配置postcss-px-to-viewport的api，非常幸运且惊喜的是api里提供了第二种真对适配landscapeWidth，于是我们这样配置，

const pxtoviewport = require("postcss-px-to-viewport");

module.exports = {
  css: {
    loaderOptions: {
      //配置路vw vm适配
      postcss: {
        plugins: [
          pxtoviewport({
            viewportWidth: 1200,
            mediaQuery: true,
            landscape: true,
            landscapeWidth: