分享一个与 postcss 和 viewport 配套使用的全新适配单位: pv

pomeloTT

背景

  • 旧的 rem 适配方案(无论是直接使用 rem,还是配合 flexiblejs 等 lib 库进行视口缩放)已经疲态尽显,且随着安卓高清屏的不断出现,同时 data-dpr 仍有进一步增加的可能性,rem 显得并不是那么稳固与称心如意。

  • 首先截止至发文日期,viewport 的兼容性如下:
    分享一个与 postcss 和 viewport 配套使用的全新适配单位: pv
    可以看到,viewport 的兼容性支持已经变得非常好,因此有机会抛弃一切外接库,直接使用原生的 viewport 。就像最早使用 sublime 到现在的 vscode,都需要重新配置插件 px2rem, 换了编辑器,换了环境,开发就会变得很陌生。再加上不同插件快捷键触发条件也不同,这就给原本就很煎熬的前端开发又增加了复杂度。好在 postcss 出现了,它允许我们用更加彻底(相比 less 和 scss 而言)的编程思维或者说面向对象的思维去对 css 做预处理。

  • 回到 px 转 vw 的问题上,解决此问题可以使用与 postcss 官方兼容的插件 postcss-px2vw-pv 解决:

  • 官方文档: https://github.com/pomelott/postcss-px2vw-pv

  • 此插件使用全新的置换单位 pv,用 postcss 自动对各种复杂 css 样式做计算与转换,而不必在开发过程中再考虑各种快捷键、编辑器插件以及转换配置等。

安装

    npm i postcss-px2vm-pv -D
    yarn add postcss-px2vw-pv --dev

配置选项

| 选项 | 类型 | 默认值 | 描述 |
|:---:|:---:|:---:|:---:|
| width | number | 750 | 设计稿像素宽度 |
| decimal | number | 4 | 换算后小数点后的保留位数 |
| comment | boolean | true | 是否生成插件相关注释 |

    module.exports = {
        plugins: [
            require('postcss-px2vw-pv')
        ]
    }

快速使用

  • 首先添加 postcss 至开发环境中,此处不做赘述,不明白的可上 postcss 官方查看。
  • 例如:
    module.exports = {
        plugins: [
            require('postcss-px2vw-pv')({
                  width: 1080
            })
        ]
    }
  • 然后对 postcss-px2vw-pv 进行配置,或使用默认配置项也可。
  • 例如一个 div 的宽度是 ’500px‘, 那么你可以使用 ’500pv‘ 进行替换,插件会根据设计稿宽度自动计算并生成新的 css 样式。

小例子

  • 在 750 宽度的设计稿下, 使用 500px 的宽度,10px 的横向位移
    .box {
        width: 500pv;
        transform: translateX(10pv);
    }
  • 生成的最终样式如下:
    .box {
        width: 66.666667vw;
        transform: translateX(1.333333vw);
    }
Gmail 和 Outlook 相互伤害

ttgo:Outlook 的通知邮件(比如未读消息 /任务到期),转发到 Gmail 的话,全部会被拒收。 而从 Gmail 返回来的通知发送失败的那封邮件,Outlook 又会标记为垃圾邮件,不动声色的将其扔进垃圾箱。 真是尼玛,神仙打架、互相伤害。

itx 和 matx ,黑苹果的纠结

monkeydev:目前有一台 3950X + vega 64 的台式机,本来想买 iMac,感觉价格高了,所以想再买台 intel 家的电脑,既可以 win 压片,也可以黑苹果但是现在面临一个选择困难症2009 年读大学的时候,就像组套 itx,但一直没有,但是现成的有个 atx 的 evga 750 的电源,又不舍得放弃心水的乔斯伯 V8 又不支持 it…

基于腾讯 COS 和 Serverless 搭建一个移动端网页相册

hsfzxjy:毕业季拍了很多照片,自己一直想写个相册存起来。最近终于将其落实到了代码,前后花了大概两周时间。 相册基于对象储存和云函数服务搭建,访问量有限的情况下几乎不用花钱。风格类似于手账,比较清新简约。 项目代码: https://github.com/hsfzxjy/albu

电信 IPv4 和 IPv6 双栈限速不同

alect:安徽电信,双栈公网,签约宽带下行 300M/上行 30M经过测试,IPv4 和 IPv6 限速不同,IPv4 限速 300/30 (稳定 360/45 ),IPv6 限速 500/100,如果同时测试 IPv4 和 IPv6 速率,互相不会影响测速,v4 和 v6 流量叠加实测网卡下行最大可以跑到 900Mbps+实测网卡上行最大可以跑到 100…

问个关于 git 和 Linux 进程的问题

ethanSong:是这样,公司一个项目 20 多个 g,我现在 pull 下来,然后删了.git 自己初始化一个库,然后 git add 之后进行 commit 操作,出现 Auto packing the repository in background for optimum performance.See "git help gc" for manu…