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

import. 發(fā)布于2019-08-23 17:07 / 3510人閱讀

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

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

詳細(xì)文檔請(qǐng)參考： 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;
`;

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/103841.html

相關(guān)文章

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

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

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

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

zero 2019-08-22 17:36 評(píng)論0 收藏0
移動(dòng)端適配方案

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

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

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

AlexTuan 2019-08-22 18:41 評(píng)論0 收藏0
CSS中常見的長(zhǎng)度單位

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

rainyang 2019-08-29 12:21 評(píng)論0 收藏0