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

frolc 发布于2019-08-29 18:43 / 3664人阅读

摘要：在基础上实现了单位转换的功能详细文档请参考源码地址示例迁移只需要修改的导入即可

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114531.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