基于 styled-components 的單位 px -> vw 自動轉換

import. 發布于2019-08-23 17:07 / 3414人閱讀

摘要：在基礎上實現了單位轉換的功能詳細文檔請參考源碼地址示例遷移只需要修改的導入即可

在 styled-components 基礎上實現了 px -> vw 單位轉換的功能

詳細文檔請參考： styled-components.com/docs

源碼地址：https://github.com/hnzycfcfed/styled-px2vw

示例

Output

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;
`;

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;
`;

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103841.html

愈發熟練的 CSS 技巧

摘要：適配方案簡單解析相對于根元素的的大小來計算坐作為一個單位是根據手淘團隊，比較，改寫的一個插件，兼容豎屏轉橫屏出現的，自定義視覺設計稿的寬度，設定最大寬度這里有的地址，下載下來用即可第一個參數是視覺設計稿的寬度，一般視覺設計稿有，可 showImg(https://segmentfault.com/img/bVbbjpG?w=1366&h=660); rem + simple-flexi...

Lin_YT 2019-08-29 15:33 評論0 收藏0
愈發熟練的 CSS 技巧

摘要：適配方案簡單解析相對于根元素的的大小來計算坐作為一個單位是根據手淘團隊，比較，改寫的一個插件，兼容豎屏轉橫屏出現的，自定義視覺設計稿的寬度，設定最大寬度這里有的地址，下載下來用即可第一個參數是視覺設計稿的寬度，一般視覺設計稿有，可 showImg(https://segmentfault.com/img/bVbbjpG?w=1366&h=660); rem + simple-flexi...

zero 2019-08-22 17:36 評論0 收藏0
移動端適配方案

摘要：業務環境是決定整體項目的適配方案的核心因素。而淘寶的主站和類似，分為移動端頁面和端頁面，端頁面同樣有著左右的留白，這也是為了讓用戶能夠在寬屏的時候將注意力集中在中間區域。移動端適配方案移動端適配方案是一個老生常談的話題，但是對于不同的項目、不同的業務場景可能會需要不同的適配方案來進行移動端適配，向下兼容的baseline也需要提前訂好。整體寬高其實移動端適配就和下面的玩具一樣，...

feng409 2019-08-30 15:54 評論0 收藏0
【技術】移動端適配 px2rem/px2vw 的原理與實現

摘要：不同的前端框架，配合等打包工具，可以更高效的使用這些插件，完成移動端適配的配置工作。簡介【目標】：前端開發移動端及H5時候，不需要再關心移動設備的大小，只需要按照固定設計稿的px值布局！【基礎】 dpr（設備像素比）css的像素px不等于設備像素/分辨率/各種值，css的px可以簡單理解為虛擬像素，與設備無關，css的px需要乘dpr計算為設備像素； css3 的 rem，即ro...

AlexTuan 2019-08-22 18:41 評論0 收藏0
CSS中常見的長度單位

摘要：可視區高度單位和可視區寬度單位單位與可視區的高度相關。的值等于可視區高度的。因此會隨著父元素對應的長度值得變化而變化。 px - 像素 px 是 CSS 中最常用的長度單位，可以用來指定字體大小，元素的寬度、高度、邊框、內邊距，外邊距的大小等等, 它是一個虛擬長度單位，是計算機系統的數字化圖像長度單位，如果px要換算成物理長度，需要指定精度DPI px 單位的值必須是整數值與px相關...

rainyang 2019-08-29 12:21 評論0 收藏0