search

evrone / postcss-px-to-viewport

A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units. The best choice to create a scalable interface on different displays by one design size.
https://evrone.com/postcss-px-viewport
MIT License
3k stars 405 forks source link

How to convert in inline style? #4

Closed airen closed 5 years ago

airen commented 6 years ago

@evrone: For example, I have some inline styles, how do I get px to vw. eg:

<div style="width: 100px"></div>

I hope it can work:

<div style="width:13.3333vw"></div>

Especially in the react project.

alicksnake22 commented 6 years ago

@airen 你好，看了你的文章的。如果过滤第三方库不进行转换？

Adamwu1992 commented 6 years ago

And, if I have a img tag like this:

<img src="url" width="100" />

I hope it can be converted to:

<img src="url" style="width:13.333vw" />

😄😄I don't know if this situation is rare

KODerFunk commented 5 years ago

@airen, @alicksnake22, @Adamwu1992 good question, but sorry, not for this solution. postcss-px-to-viewport is a plugin for PostCSS.

657447158 commented 4 years ago

@evrone: For example, I have some inline styles, how do I get px to vw. eg:

<div style="width: 100px"></div>

I hope it can work:

<div style="width:13.3333vw"></div>

Especially in the react project.

大漠老师，关于行内样式px转vw的问题解决了吗？

lzm0x219 commented 4 years ago

@657447158 行内样式的转换与这个插件无关，你可以用公式进行转换

lzm0x219 commented 4 years ago

@657447158 const getVwUnit = (num: number): number => num / window.screen.width * 100，num是px单位