wswmsword / postcss-mobile-forever

一款 PostCSS 插件,将固定尺寸的视图转为可跟随宽度变化而等比例伸缩的视图。To adapt different displays by one mobile viewport.
https://wswmsword.github.io/examples/mobile-forever/vanilla/
MIT License
325 stars 19 forks source link

能否支持在转换成vw时,让某些竖直方向的属性,比如height,使用vh #38

Closed ddztomcat closed 6 months ago

ddztomcat commented 6 months ago
在 1920px*1080px 的屏幕分辨率下
1920px = 100vw
1080px = 100vh
以一个宽 300px 和 200px 的 div 来说,其所占的宽高,以 vw 和 vh 为单位,计算方式如下:
vwDiv = (300px / 1920px ) * 100vw
vhDiv = (200px / 1080px ) * 100vh

能达到这种效果吗

wswmsword commented 6 months ago

现在是没这个特性的,这个有应用场景吗?我还没见过这种开发模式。。。

ddztomcat commented 6 months ago

现在是没这个特性的,这个有应用场景吗?我还没见过这种开发模式。。。

开发pc大屏时,假如设计稿19201080,比例是 16/9 的,那么在某些比例大于 16/9 的屏幕上,如果在竖直方向也是采用vw的话,可能会导致y方向出现滚动条,理想是y方向按照(设计稿宽带/ 1080px ) 100vh

wswmsword commented 6 months ago

设计稿 1920*1080,如果一个放在 19201080 屏幕上的,尺寸是 100*100 的正方形,换成 1920*2000 的屏幕,按照您提供的计算方法 `vhDiv = (100px / 1080px ) 100vh,结果是9.26vh`,经过浏览器的转换,会得到一个 100*185.2 的长方形,这就不是原来的正方形了。 你这个是数字大屏吗,可以试试这几个库:

ddztomcat commented 6 months ago

设计稿 19201080,如果一个放在 19201080 屏幕上的,尺寸是 100100 的正方形,换成 19202000 的屏幕,按照您提供的计算方法 vhDiv = (100px / 1080px ) * 100vh,结果是 9.26vh,经过浏览器的转换,会得到一个 100*185.2 的长方形,这就不是原来的正方形了。 你这个是数字大屏吗,可以试试这几个库:

有道理