基于 styled-components 的單位 px -> vw 自動轉(zhuǎn)換

frolc 發(fā)布于2019-08-29 18:43 / 3713人閱讀

摘要：在基礎(chǔ)上實現(xiàn)了單位轉(zhuǎn)換的功能詳細文檔請參考源碼地址示例遷移只需要修改的導(dǎo)入即可

在 styled-components 基礎(chǔ)上實現(xiàn)了 px -> vw 單位轉(zhuǎn)換的功能

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

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

示例

Output

Screenshot

遷移

只需要修改 styled-components -> styled-px2vw 的導(dǎo)入即可

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

GPU云服務(wù)器云服務(wù)器 px2vw html 單位vw js 數(shù)據(jù)類型的自動轉(zhuǎn)換 js 數(shù)據(jù)自動轉(zhuǎn)換

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114531.html

相關(guān)文章

愈發(fā)熟練的 CSS 技巧

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

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

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

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

摘要：業(yè)務(wù)環(huán)境是決定整體項目的適配方案的核心因素。而淘寶的主站和類似，分為移動端頁面和端頁面，端頁面同樣有著左右的留白，這也是為了讓用戶能夠在寬屏的時候?qū)⒆⒁饬性谥虚g區(qū)域。移動端適配方案移動端適配方案是一個老生常談的話題，但是對于不同的項目、不同的業(yè)務(wù)場景可能會需要不同的適配方案來進行移動端適配，向下兼容的baseline也需要提前訂好。整體寬高其實移動端適配就和下面的玩具一樣，...

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

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

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

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

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