一次部署转换多端

pinecone-squirrel commented 4 months ago

Clear and concise description of the problem

首先我只打一次包只部署一次

然后这个时候我需要同时适配 pc和手机如果pad端有问题可能也会适配pad

采用vw、vh+媒体查询的方案

这个时候是有两个设计稿的 1920x1080 和 750x812，可能还会有个pad的假设我的屏幕断点是 1280 和 768

我肯定在不同的媒体查询里面宽度不一致一般可能我直接通过1280就区分了pc和移动如果pad有问题可能会细分 1280 768

这样我的媒体查询对应的设计稿宽度肯定是不一样的

这个时候插件能不能做到根据不同媒体查询设置设计稿的宽度然后吧px转成vw

Alternative

No response

Additional context

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guide.
[X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

kirklin commented 2 months ago

This feature was implemented in v0.1.0, see the readme for details.

kirklin commented 2 months ago

Per-File 配置

此插件现在支持per-file配置，允许你为每个CSS或SCSS文件指定不同的视口宽度。要使用这个功能，只需在文件的开头添加一个特殊的注释：

/* viewport-width: 1920 */

插件会读取这个注释并使用指定的宽度来进行单位转换。这对于在同一个项目中为不同的设备（如PC、平板、手机）创建不同的CSS文件特别有用。

示例

以下是一个示例配置，将像素值转换为vw单位，默认视口宽度为750像素，并启用per-file配置：

// postcss.config.js

module.exports = {
  plugins: {
    "postcss-px-conversion": {
      unitType: "px",
      viewportWidth: 750,
      enablePerFileConfig: true,
      viewportWidthComment: "viewport-width",
    },
  },
};

使用这个配置，你的CSS中的像素值将在PostCSS处理期间自动转换为视口单位。同时，你可以在每个文件中使用注释来指定该文件的特定视口宽度。

例如，在一个针对桌面设备的CSS文件中：

/* viewport-width: 1920 */
.header {
  width: 1600px; /* 将被转换为 83.33333vw */
}

而在一个针对移动设备的CSS文件中：

/* viewport-width: 375 */
.header {
  width: 350px; /* 将被转换为 93.33333vw */
}

这样，你就可以在一次构建中生成适配多种设备的CSS，同时保持了代码的灵活性和可维护性。

kirklin commented 2 months ago

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="desktop.css" media="(min-width: 1280px)">
<link rel="stylesheet" href="tablet.css" media="(min-width: 768px) and (max-width: 1279px)">
<link rel="stylesheet" href="mobile.css" media="(max-width: 767px)">

pinecone-squirrel commented 2 months ago

每个文件配置

此插件现在支持每个文件配置，允许你选择一个CSS或SCSS文件指定不同的视口宽度。要使用这个功能，只需在文件的开头添加一个特殊的注释：
/* viewport-width: 1920 */
插件会读取这个注释并使用指定的宽度转换为相应的字符。因此，在不同的设备（如PC、平板、手机）上创建不同的CSS文件特别有用。

示例

以下是一个示例配置，将像素值转换为vw单位，默认视口宽度为750像素，并启用每个文件配置：
// postcss.config.js

module.exports = {
  plugins: {
    "postcss-px-conversion": {
      unitType: "px",
      viewportWidth: 750,
      enablePerFileConfig: true,
      viewportWidthComment: "viewport-width",
    },
  },
};
使用这个配置，你的CSS中的像素值将在PostCSS处理期间自动转换为视口单位。同时，如果你使用美元注释来指定你的文件像素宽度。

例如，一个针对桌面设备的CSS文件中：
/* viewport-width: 1920 */
.header {
  width: 1600px; /* 将被转换为 83.33333vw */
}
而一个针对移动设备的CSS文件中：
/* viewport-width: 375 */
.header {
  width: 350px; /* 将被转换为 93.33333vw */
}
这样，你就可以在一次生成适用于多种设备的CSS，同时保持了代码的灵活性和可执行性。

好的，谢谢大佬

还有一个小小的请求

希望老的项目里面说一下已经不维护了然后把新的项目链接挂上去

因为我是在issues里面才发现这个新项目的

kirklin commented 2 months ago

这个没办法，因为原项目开发的人我不认识，我只是看见不维护了自己开了个新仓库。和原项目无关。

kirklin / postcss-px-conversion