evrone/postcss-px-to-viewport

有办法大于一定宽度不继续缩放了么?

frank-pian opened this issue · 9 comments

比如正常1400px宽度适配,小于1400px进行缩放,但是大于1400px的屏幕没必要放大,这样可以多显示一些内容。

遇到同样的问题,解决了么?

我不用vw了,改成自动转换rem了。。。
然后在写个媒体查询

同求,希望有个maxWidth

好像只能寫兩套代碼,這個沒辦法自適應

我是配置媒体查询不做 px-vw 的转化,然后把写好的css复制一份到媒体查询中

可以通过媒体查询或者 css 函数限制最大宽度,这样就没有“大屏大字”的问题了。

可以试下我这两天写的 postcss 插件,postcss-mobile-forever。这个插件提供了两种方法,一个是媒体查询(默认方法),另一个是 css 函数。媒体查询会生成桌面端和横屏两套代码,因此代码量较大,相对可以使用另一种 css 函数的方法,这种方法的代码量会少一些,同时 css 函数不能像媒体查询一样分配两个宽度,仅仅会在大于设定的一个宽度后不再变化,所以媒体查询的方法对于希望区分横屏和桌面端的情况,展示效果又更理想。

npm install postcss postcss-mobile-forever --save-dev
uxzhen commented

内嵌一次就行了

<title></title> <iframe id="iframe" src="./index.html" frameborder="0"></iframe> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background: #eee; } #iframe{ background: #fff; display: block; width: 768px; height: 100vh; margin: 0 auto; } </style>
uxzhen commented
<iframe id="iframe" src="./index.html" frameborder="0"></iframe> 嵌套一下,然后给iframe设置宽度,因为单位是vw,index的100vw就是iframe的宽度

求官方解决一手, 确实有用