美文网首页
简单速记-px2vw

简单速记-px2vw

作者: 长鲸向南 | 来源:发表于2020-07-19 10:30 被阅读0次
px2vw--------css单位转换
  • 为了移动端适配,我们可以使用postcss-px-to-viewport插件来进行px-vw的单位转换
    文档指路------>GitHub

  • 安装postcss-px-to-viewport

  • npm install postcss-px-to-viewport --save-dev

  • 配置postcss.config.js

  • module.exports = {
      plugins: {
        autoprefixer: {},
        "postcss-px-to-viewport": {
          viewportWidth: 375, //视窗的宽度,对应我们设计稿的宽度,一般指retina(一个点两个像素),宽度750
          viewportHeight: 667, //视窗的高度,对应我们设计稿的高度,可以不配置
          unitPrecision: 5, //指定`px`转化成视窗单位值的小数位数(很多时候不能整除)
          viewportUnit: 'vw', //指定需要转换的视窗单位 建议'vw'
          selectorBlackList: ['ignore'], //指定不需要转换的类
          exclude: [/TabBar/], //指定不要转换的文件,数组内应该是正则表达式
          minPixelVaule: 1, //小于或者等于1px不转换为视窗单位
          mediaQuery: flase , //允许在媒体查询中转换'px'
          landscape: false,  // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
          landscapeUnit: "vw", // 横屏时使用的视窗单位
          landscapeWidth: 1134 // 横屏时使用的视窗宽度
        }
      }
    }
    

相关文章

  • 简单速记-px2vw

    px2vw--------css单位转换 为了移动端适配,我们可以使用postcss-px-to-viewport...

  • Day69 口译的特点

    昨天我们简单说了什么是“口译速记”以及口译速记与速记和听写的区别,今天我们就来聊一聊口译有哪些特点。 一. 瞬时性...

  • Markdown简单语法速记

    1. 引用 示例: 引用 2. 代码 使用反引号\ 将行内代码包裹起来,例如: `System.out.print...

  • 单身狗的翻身仗怎么打?

    三大方法速记这些内容 1、连锁拍照法速记重要事件 2、情景故事速记速记购物信息 3、逻辑故事法速记客户档案 一、连...

  • D10 week2 2017.6.29

    1. 精进口语,听力,慢跑 2. 主攻听力 a 对话听力: 这个比较简单,总体用首字母配合简单的箭头进行速记,基本...

  • 超右脑单词速记

    单词速记

  • 30秒单词速记

    我是超右脑单词速记高级讲师,从事单词速记 研究工作有10年 。最近在悟空,知乎收到很多关于英语单词速记的问题,不同...

  • 【雯说心💓语】心脑速记的由来

    本周五迎来第48期心脑速记课程了,心脑速记这个“孩子”从2013年走到了2020年,7岁了。想说说心脑速记课程...

  • 补2 18+《儿童时间管理训练手册》+Day10

    驾照考试速记

  • 照相记忆和快速记忆的区别

    照相记忆和快速记忆的区别 先说说快速记忆 学习快速记忆真的能帮助提升记忆力吗? 这个毫无疑问,确实可以,不过要经常...

网友评论

      本文标题:简单速记-px2vw

      本文链接:https://www.haomeiwen.com/subject/zfjlkktx.html