当前仓库属于暂停状态,部分功能使用受限,详情请查阅 仓库状态说明
1 Star 5 Fork 0

Ttou / postcss-px-to-viewport
暂停

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

postcss-px-to-viewport

NPM version

English | 中文

将 px 单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件.

注意: 该插件已经不再支持,请使用 postcss-mobile-forever 代替.

简介

如果你的样式需要做根据视口大小来调整宽度,这个脚本可以将你 CSS 中的 px 单位转化为 vw,1vw 等于 1/100 视口宽度。

输入

.class {
  margin: -10px 0.5vh;
  padding: 5vmin 9.5px 1px;
  border: 3px solid black;
  border-bottom-width: 1px;
  font-size: 14px;
  line-height: 20px;
}

.class2 {
  padding-top: 10px; /* px-to-viewport-ignore */
  /* px-to-viewport-ignore-next */
  padding-bottom: 10px;
  /* Any other comment */
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 20px;
  line-height: 30px;
}

@media (min-width: 750px) {
  .class3 {
    font-size: 16px;
    line-height: 22px;
  }
}

输出

.class {
  margin: -3.125vw 0.5vh;
  padding: 5vmin 2.96875vw 1px;
  border: 0.9375vw solid black;
  border-bottom-width: 1px;
  font-size: 4.375vw;
  line-height: 6.25vw;
}

.class2 {
  padding-top: 10px;
  padding-bottom: 10px;
  /* Any other comment */
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 6.25vw;
  line-height: 9.375vw;
}

@media (min-width: 750px) {
  .class3 {
    font-size: 16px;
    line-height: 22px;
  }
}

上手

安装

使用 npm 安装

$ npm install @ttou/postcss-px-to-viewport --save-dev

或者使用 yarn 进行安装

$ yarn add -D @ttou/postcss-px-to-viewport

配置参数

默认参数:

{
  unitToConvert: 'px',
  viewportWidth: 320,
  unitPrecision: 5,
  propList: ['*'],
  viewportUnit: 'vw',
  fontViewportUnit: 'vw',
  selectorBlackList: [],
  minPixelValue: 1,
  mediaQuery: false,
  replace: true,
  exclude: undefined,
  include: undefined,
  landscape: false,
  landscapeUnit: 'vw',
  landscapeWidth: 568
}
  • unitToConvert (String) 需要转换的单位,默认为"px"
  • viewportWidth (Number) 设计稿的视口宽度
  • unitPrecision (Number) 单位转换后保留的精度
  • propList (Array) 能转化为 vw 的属性列表
    • 传入特定的 CSS 属性;
    • 可以传入通配符""去匹配所有属性,例如:[''];
    • 在属性的前或后添加"*",可以匹配特定的属性. (例如['*position*'] 会匹配 background-position-y)
    • 在特定属性前加 "!",将不转换该属性的单位 . 例如: ['*', '!letter-spacing'],将不转换 letter-spacing
    • "!" 和 ""可以组合使用, 例如: ['', '!font*'],将不转换 font-size 以及 font-weight 等属性
  • viewportUnit (String) 希望使用的视口单位
  • fontViewportUnit (String) 字体使用的视口单位
  • selectorBlackList (Array) 需要忽略的 CSS 选择器,不会转为视口单位,使用原有的 px 等单位。
    • 如果传入的值为字符串的话,只要选择器中含有传入值就会被匹配
      • 例如 selectorBlackList['body'] 的话, 那么 .body-class 就会被忽略
    • 如果传入的值为正则表达式的话,那么就会依据 CSS 选择器是否匹配该正则
      • 例如 selectorBlackList[/^body$/] , 那么 body 会被忽略,而 .body 不会
  • minPixelValue (Number) 设置最小的转换数值,如果为 1 的话,只有大于 1 的值会被转换
  • mediaQuery (Boolean) 媒体查询里的单位是否需要转换单位
  • replace (Boolean) 是否直接更换属性值,而不添加备用属性
  • exclude (Array or Regexp) 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
    • 如果值是一个正则表达式,那么匹配这个正则的文件会被忽略
    • 如果传入的值是一个数组,那么数组里的值必须为正则
  • include (Array or Regexp) 如果设置了include,那将只有匹配到的文件才会被转换,例如只转换 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
    • 如果值是一个正则表达式,将包含匹配的文件,否则将排除该文件
    • 如果传入的值是一个数组,那么数组里的值必须为正则
  • landscape (Boolean) 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
  • landscapeUnit (String) 横屏时使用的单位
  • landscapeWidth (Number) 横屏时使用的视口宽度

excludeinclude是可以一起设置的,将取两者规则的交集。

Ignoring (需要翻译帮助。)

You can use special comments for ignore conversion of single lines:

  • /* px-to-viewport-ignore-next */ — on a separate line, prevents conversion on the next line.
  • /* px-to-viewport-ignore */ — after the property on the right, prevents conversion on the same line.

Example:

/* example input: */
.class {
  /* px-to-viewport-ignore-next */
  width: 10px;
  padding: 10px;
  height: 10px; /* px-to-viewport-ignore */
  border: solid 2px #000; /* px-to-viewport-ignore */
}

/* example output: */
.class {
  width: 10px;
  padding: 3.125vw;
  height: 10px;
  border: solid 2px #000;
}

There are several more reasons why your pixels may not convert, the following options may affect this: propList, selectorBlackList, minPixelValue, mediaQuery, exclude, include.

使用 PostCss 配置文件时

postcss.config.js添加如下配置

module.exports = {
  plugins: {
    // ...
    'postcss-px-to-viewport': {
      // options
    }
  }
}

直接在 gulp 中使用,添加 gulp-postcss

gulpfile.js 添加如下配置:

var gulp = require('gulp')
var postcss = require('gulp-postcss')
var pxtoviewport = require('@ttou/postcss-px-to-viewport')

gulp.task('css', function () {
  var processors = [
    pxtoviewport({
      viewportWidth: 320,
      viewportUnit: 'vmin'
    })
  ]

  return gulp
    .src(['build/css/**/*.css'])
    .pipe(postcss(processors))
    .pipe(gulp.dest('build/css'))
})

参与贡献

在提 PR 之前,请先阅读 代码指南贡献指南

测试

为了跑测试案例,您需要安装开发套件:

$ npm install

然后输入下面的命令:

$ npm run test

Changelog

变更日志在 .

版本跟踪

使用 SemVer 做版本跟踪, 可用版本可在看到

作者

contributors 里可以看到谁参与了本项目.

许可

本项目使用 MIT License.

赞助商

访问 Evrone网站以获取有关项目构建的更多信息。

Sponsored by Evrone

借鉴自

MIT License Copyright (c) 2016-2020 Dmitry Karpunin <koderfunk@gmail.com> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

暂无描述 展开 收起
TypeScript 等 3 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/jh_shot/postcss-px-to-viewport.git
git@gitee.com:jh_shot/postcss-px-to-viewport.git
jh_shot
postcss-px-to-viewport
postcss-px-to-viewport
master

搜索帮助

14c37bed 8189591 565d56ea 8189591