移动端适配方案之postcss-px-to-viewport

2023-11-11

之前做移动端适配时,基本上是采用rem方案,现在发现了一个新的方案,就是用viewport单位,现在viewport单位越来越受到众多浏览器的支持

postcss-px-to-viewport,将px单位自动转换成viewport单位,用起来超级简单,postcss-px-to-viewport 文档

  • 安装
npm install postcss-px-to-viewport --save-dev
  • 引入vue项目,再postcss.config.js引入
module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
       viewportWidth: 750,   // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
      viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
      unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: "vw",   //指定需要转换成的视窗单位,建议使用vw
      selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1,     // 小于或等于
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

移动端适配方案之postcss-px-to-viewport 的相关文章

  • 网络工程师:你是否真的已经倒下了?

    当前 阴魂笼罩在 网络管理员 网络工程师 这个职业上 干活比谁都累 工资比谁都低 不少人认为这个职业不再是高端的技术型人才 难道 网络工程师 你是否真的已经倒下了 不想低薪 请积极参与公司的业务 从最近我们公司招生来看 一个很明显的问题阴魂
  • 单元测试框架——Junit5

    文章目录 Junit 1 注解 2 断言 3 测试用例执行顺序 4 测试套件Suite 1 指定多个类 2 指定包 5 参数化 1 单参数 2 多参数 3 文件注入 6 动态参数 Junit Junit是一个开源的用于Java语言的单元测试

随机推荐

  • Maven系列(一):安装、配置Settings.xml配置文件与使用

    安装与使用 今天博主将为大家分享一下Maven的下载与安装 不喜勿喷 如有异议欢迎讨论 以下所写内容均与以前的文章有联系可以前往博文查看 陈永佳的博客 Maven 前言 首先 Maven是基于项目对象模型 POM project objec
  • 低门槛+低成本大学生宿舍物联网门锁系统(APP+小程序+Stm32)

    系统简介 本物联网门锁由 Stm32F103开发板 微信小程序 手机APP Wcf服务后端 vbnet辅助服务程序 sqlite数据库组成 适合软件 控制 通信等相关专业的同学练手 所有代码无偿公开 经测试能保证长时间稳定运行 实际部署时有
  • AlexNet VGGNet ResNet 对比 简介

    AlexNet 网络结构 多GPU Relu Dropout 层叠池化 图片的随机采样 其他 VGGNet 网络结构 3 3 卷积核 1 1 卷积核 LRN 其他 ResNet 退化问题 残差学习 残差网络子结构 网络结构 referenc
  • oracle 修改数据库的字符集编码为UTF-8

    转 http www cnblogs com rootq articles 2049324 html Oracle 字符集的查看和修改 一 什么是Oracle字符集 Oracle字符集是一个字节数据的解释的符号集合 有大小之分 有相互的包容
  • 网站服务器挂了几天排名恢复,网站恢复排名方法

    身为一名seo行业的优化人员 必须要掌握的一点就是要时刻关注搜索引擎的算法规则更新 否则网站的一些架构跟内容难免的被新算法出来给打击了 严重的情况一般会导致降权甚至K站 下面站优云的小编就针对网站被降权如何恢复排名做个简单的介绍 一 提高友
  • bash循环得到日期目录

    1 bin bash 2 today date Y m d 3 echo today is today 4 single input raw data 5 6 7 startday date Y m d d 90 days ago 8 en
  • 计算机毕业设计之基于tensorflow-lstm的股票爬虫+预测及可视化

    1 简介 博主介绍 全网粉丝30W csdn特邀作者 博客专家 CSDN新星计划导师 编程领域优质创作者 博客之星 各平台优质作者 专注于Java python等技术领域和毕业项目实战 文末获取源码联系 计算机毕业设计之基于tensorfl
  • 最短路径A*算法原理及java代码实现(看不懂是我的失败)

    算法只要懂原理了 代码都是小问题 先看下面理论 尤其是红色标注的 要源码请留下邮箱 有测试用例 直接运行即可 A 算法 百度上的解释 A 1 A Star 算法是一种静态路网中求解最短路最有效的直接搜索方法 公式表示为 f n g n h
  • 图像边缘检测

    文章目录 前言 一 图像边缘检测 二 边缘检测算子 1 Roberts算子 2 Prewitt算子 3 Sobel算子 三 代码实现 总结 前言 有了图像放大缩小 图像灰度化处理等相关基础知识过后 就可以进行图像边缘检测了 边缘检测最后也会
  • 全屋智能家居搭建初级指南(装修用户)

    环境 小M等智能设备 新装修用户 稳定网络环境 规划好电路布局 问题描述 全屋智能家居如何搭建 初级指南 装修用户 下面部分内容摘自小M智能家居 解决方案 一 装修中需要注意什么 句话概括 需在水电进场前考虑智能家居设计 主要准备两件事 铺
  • jdbc,jpa,springjdbc,springdatajpa,mybatis之间的区别

    jdbc jdbc是Java提供的原生态接口 操作数据库的唯一技术 缺点 重复写代码 代码写死 耦合性高 开发效率低换数据库比较苦难 优点 运行速度最快 所有操作数据库的技术底层都是jdbc写的 jpa java persistence a
  • 汉诺塔(Hanoi)理解(递归函数)

    1 编程求解汉诺塔问题 汉诺塔 Hanoi 是必须用递归方法才能解决的经典问题 它来自于印度神话 上帝创造世界时作了三根金刚石柱子 在第一根柱子上从下往上按大小顺序摞着64片黄金圆盘 如图7 3所示 上帝命令婆罗门把圆盘从下面开始按大小顺序
  • Postman使用Get请求和Post请求

    今天写了很多新活动接口文档 然后使用了Postman 主要总结一下postman的用法 1 Get请求 对应你方法中的getmapping 这种方法只要把参数拼上去就可以了 拼参数有两种格式 A在 中放入的参数 PathVariable 直
  • 业务架构·应用架构·数据架构实战~TOGAF理论全景解读

    1 解读TOGAF 9 2的BA DA AA TA内容模型 企业架构 Enterprise Architecture 包含如下四种架构 BA Business Architecture 业务架构 DA Data Architecture 数
  • 使用Linux脚本更新Weblogic部署的应用程序

    在利用Jenkins实现Weblogic应用自动部署的功能时 如何通过Shell 脚本自动更新Weblogic部署的应用程序呢 可以使用weblogic jar包中的weblogic Deployer这个class 命令如下 java we
  • 移动电源/充电管理设计

    移动电源 充电管理设计 简述 伴随着智能手机的兴起 智能手机的续航成了较大的问题 因此移动电源 充电宝 成为不时之需 而近来的各类无线耳机的兴起 无线耳机的续航又成为新的问题 为此针对无线耳机充电的各大厂商又一次成为热门 而这些都需要类似于
  • Windows11如何使用安卓子系统的Amazon Appstore

    这个月更新了Windows11以后 已经可以在微软应用商店下载安卓子系统并且安装安卓应用了 但是安卓子系统默认使用的是亚马逊的Amazon Appstore 目前这个商店只限制在美国使用 如果直接打开的话会提示Amazon AppStore
  • python学习日记【13 - 面向对象三】

    面向对象三 继承简介 方法重写 super 多重继承 多态 属性和方法 继承简介 继承是面向对象三大特性之一 通过继承我们可以使一个类获取到其他类中的属性和方法 在定义类时 可以在类名后面的括号中指定当前类的父类 超类 基类 继承提高了类的
  • 拥抱你的zsh,Linux下速通zsh&oh-my-zsh配置(附常用插件&主题)

    zsh oh my zsh配置 为什么要使用zsh 功能强大插件 丰富酷炫的主题 对bash完全兼容 这意味着与bash语法一致 功能更 健全 的Tab补全 代码高亮 相信你在阅读完本文以及用上zsh一段时间过后之后 可能并不需要很久 能对
  • 移动端适配方案之postcss-px-to-viewport

    之前做移动端适配时 基本上是采用rem方案 现在发现了一个新的方案 就是用viewport单位 现在viewport单位越来越受到众多浏览器的支持 postcss px to viewport 将px单位自动转换成viewport单位 用起