V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
danielzhao
V2EX  ›  React

基于 styled-components 的单位 px -> vw 自动转换

  •  1
     
  •   danielzhao · 2019-04-25 11:02:23 +08:00 · 2200 次点击
    这是一个创建于 2072 天前的主题,其中的信息可能已经有所发展或是发生改变。

    styled-components 基础上实现了 px -> vw 单位转换的功能
    详细文档请参考: styled-components.com/docs
    源码地址:https://github.com/hnzycfcfed/styled-px2vw

    示例

    style

    Output

    converted

    Screenshot

    screenshot

    迁移

    只需要修改 styled-components -> styled-px2vw 的导入即可

    import styled, { createGlobalStyle,... } from 'styled-components';
    
    const Button = styled.button`
      color: white;
      font-size: 36px;
      margin: 10px;
      height: 85px;
      border: 2px solid palevioletred;
      border-radius: 3px;
    `;
    

    to

    import styled, { createGlobalStyle,... } from 'styled-px2vw';
    
    const Button = styled.button`
      color: white;
      font-size: 36px;
      margin: 10px;
      height: 85px;
      border: 2px solid palevioletred;
      border-radius: 3px;
    `;
    
    1 条回复    2019-04-25 11:07:08 +08:00
    leisure
        1
    leisure  
       2019-04-25 11:07:08 +08:00
    自动转 vw !

    感谢楼主!

    这下方便多了!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3070 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 13:19 · PVG 21:19 · LAX 05:19 · JFK 08:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.