V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
danielzhao
V2EX  ›  React

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

  •  1
     
  •   danielzhao · Apr 25, 2019 · 2788 views
    This topic created in 2559 days ago, the information mentioned may be changed or developed.

    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 replies    2019-04-25 11:07:08 +08:00
    leisure
        1
    leisure  
       Apr 25, 2019
    自动转 vw !

    感谢楼主!

    这下方便多了!
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5747 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 01:41 · PVG 09:41 · LAX 18:41 · JFK 21:41
    ♥ Do have faith in what you're doing.