wswmsword / postcss-mobile-forever Goto Github PK

一款 PostCSS 插件，将固定尺寸的视图转为可跟随宽度变化而等比例伸缩的视图。To adapt different displays by one mobile viewport.

Home Page: https://wswmsword.github.io/examples/mobile-forever/vanilla/

License: MIT License

JavaScript 60.40% HTML 11.83% CSS 14.88% Vue 10.60% Svelte 2.17% SCSS 0.03% TypeScript 0.09%

postcss css-scale media-queries mobile-design pixel-units viewport-units responsive-web-design css postcss-px-to-viewport mobile-first

postcss-mobile-forever's People

Contributors

Stargazers

Watchers

Forkers

wjf2016 jinly2 zy199226 torns jinrd123 erwer8363 zzy11027 yutao721 dc233 atom258 yanbowe yongjieyuan justkang666

postcss-mobile-forever's Issues

在webcompent组件中不生效，已禁用shadow

webcompent组件禁用了shadow机制，能受到外部样式的影响，但似乎该插件没有作用于组件内部

The use of version Next.js is not effective.

Next.js version 14.0.3

`border` 属性的实现，用 `box-shadow` 去模拟是否会更合适

目前设置开启 border 后，在暗黑模式下左右两侧会显示白边

虽然可以设置改变颜色，但 border 会占用实际的空间，导致容器实际宽度会减 2px ，这应该是不符合预期的

而用 box-shadow 则不会占用实际的像素，就像这样：

box-shadow: -1px 0 0 0 #ccc, 1px 0 0 0 #ccc;

请问一下，用的antd-mobile，Popup这个组件该如何处理？

请问一下大佬，Popup这个组件该怎么处理？谢谢

postcss-mobile-forever版本4.1.2在 Vue3 vite5 配置不生效

在vite.config.js配置如下

如何让maxDisplayWidth只针对某个class或者某个页面，而不是一设置上来就是限制全局

color属性无效

如: color: #781A05, 会经过转换变为: color: #781A5;
最终浏览器不识别颜色代码, 造成无效

对于动态append to body的元素处理失效

在 ant mobile 中的 Dialog 组件,使用后会将弹窗 append 到 body 根元素，此时 maxDisplayWidth 选项对 dialog 组件不生效，窗口变宽弹窗也会变大，这种情况如何处理

设置了maxDisplayWidth 之后，对于 width 设置为 100% 的元素，也会被重置为 min(100%, 500px)，但是我希望忽略设置为 100% 的元素

bug: css 变量默认值不转换

输入:

.test {
    font-size: var(--row-font-size, 14px);
}

实际输出:

.test {
    font-size: var(--row-font-size, 14px);
}

希望输出：

.test {
    font-size: var(--row-font-size, min(19.2vw, 99.84px));
}

postcss-mobile-forever 报错要求依赖 PostCSS 8

          @wswmsword 你试试低版本的node10.19.0  因为相关关联的node-sass等 引入的依赖包都是以低版本node为标准的 vue2.6.11+vant2.12.47

Originally posted by @zhuweilong in #2 (comment)

有个nuxt3官网项目，准备同时适配PC和移动端，有插件相关demo参考下吗

Vant4项目使用之后popup的mask半透明黑色背景不会宽度100%了

如上图所示，我尝试使用propertyBlackList属性，
propertyBlackList: { ".van-overlay": "width,left", },
但是"width,left"好像不能这么写，只能写一个。

不明白为什么在 style 中写的 px 值在大屏下，会被转为NaN?

如题，这个怎么破解，是哪里配置有问题么？

移动端竖屏不能转换vh单位,请作者大大麻烦看看是不是我没配置好

module.exports = {
plugins: {
autoprefixer: {}, //给不同的浏览器添加前缀
"postcss-mobile-to-multi-displays": {
"viewportWidth": 375,
"desktopWidth": 375,
"landscapeWidth": 425,
"yAxisBreakPoint": null,
"xAxisBreakPoint": 375,
"rootClass": "root-class",
"border": false,
"disableDesktop": false,
"disableLandscape": false,
"enableMobile": true,
"pass1px": true,
"exclude": null,
"include": null,
"unitPrecision": 3,
"mobileConfig": {
"propList": ['*'],
"viewportUnit": "vw",
"fontViewportUnit": "vw",
"selectorBlackList": ['van'],
"replace": true
}
},
"postcss-px-to-viewport": {
unitToConvert: 'px', //需要转换的单位
viewportWidth: '375', //视窗的宽度，对应设计稿的宽度理想视口宽度为375
viewportHeight: '667',//视窗的高度，对应设计搞的高度
viewportUnit: 'vw',//转换的视窗单位
selectorBlackList: ['TabBarItem', '.pc-container','van'], // 指定不需要转换的类
minPixelValue: 1,//小于或者等于1px 不转换
mediaQuery: false,//是否允许媒体查询中转换px
unitPrecision: 5,//转换后的精度，即小数点
// mediaQuery:true
}
}
}

include是否有使用demo

使用vite vue 多页应用，如何只是mobile下面的文件才生效，配置了include: /mobile/,不起效果

设置了之后移动端和pc端是不是都会限制最大宽度

设置如下：
{
"viewportWidth": file => file.includes("vant") ? 375 : 375,
"appSelector": "#app",
"maxDisplayWidth": 600
}

需求：想使用移动端的设计稿，兼容移动端和pc端的显示，我想到的问题就是在pc端会变得非常大，因为pc端是横屏，所以我找到了这个库，按照我的理解就是可以限制一个最大宽度，无论在pc端和移动端只要超过限制就不会发生转换。
问题：当我切换到pc的时候，显示变得异常大，我不知道是我对这个库的使用场景理解有误还是设置有问题？麻烦帮忙看看，需要提供什么额外信息请告知。

可以增加一个最小宽度的限制么，目前我的需求是pc端适配，移动端不适配

有个问题，使用 vant-popup, 属性是 bottom 的时候在PC 端预览时不会居中

小于或者等于1像素的值不转换vw，需要如何配置

如题所示，现在小于1像素也给转换了，导致显示太细，不美观，文档中也没找到如何解决这个问题

想实现 postcss-px-to-viewport 中的配置 minPixelValue 或者在css 中添加注释过滤的功能

还望能解决下，非常感谢

如果我希望在980宽度以下，不再进行缩放，怎么配置呢？

uni-app使用

你好我在uni-app中使用报错了这个怎么改

postcss-px-to-multi-displays 要求必须安装 PostCSS 8

vue2版本加vant，使用1.3.2能正常使用

feat: 支持运行时转换

暴露一个运行时函数，可以进行运行时的代码转换：

transform("750px") ==>  输出100vw

这样行内样式我们可以自己处理（一般行内样式都是用于动态的逻辑处理）:

import { transform } from "xxxx";

function A () {
  //宽高比
  const rate = 2;
  return <img src="xxx" width={transform(750)}  height={transform(750/rate)} />
}