【前端可视化】postcss-px-to-viewport 适配怎么限制最大宽度?使用 postcss-mobile-forever

需求原因

自己用 nuxt3 写官网发现用 postcss-px-to-viewport 这个插件虽然能够实现基于 vw 的响应式,但是无法做到限制宽度,比如设计稿 1920p,我只想让最大缩放比例为 1920p,不能超过,就无法实现了。

方案参考

纯 css 的话,有两个办法,一种用 px 生成两套代码,一套移动端的 vw 视图,一套最大宽度的媒体查询代码,另一种方法是用类似 min(vw, px) 的 css 函数限制 vw 的最大值。

有大佬已经写好了插件 postcss-mobile-forever

可以实现限制最大宽度,原理就是我上面说的,提供了两个办法,把新 px 放到插件生成的媒体查询里,或者转为 css 函数。

最后可以实现移动端、桌面端和移动端横屏都有蛮好的展示效果。
在这里插入图片描述

Github 主页:https://github.com/wswmsword/postcss-mobile-forever
npm 主页:https://www.npmjs.com/package/postcss-mobile-forever

使用方式请点击上面的文档地址哟👆

感谢

postcss-px-to-viewport 怎么限制最大宽度

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/644739.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

webassembly003 whisper.cpp的python绑定实现+Cython+Setuptools

python绑定项目 官方未提供python的封装绑定,直接调用执行文件 https://github.com/stlukey/whispercpp.py提供了源码和Cpython结合的绑定 https://github.com/zhujun1980/whispercpp_py提供了ctype方式的绑定,需要先make libwhisper.so Pybind11 bi…

spring Cloud Stream 实战应用深度讲解

springCloudStream 简介 Spring Cloud Stream是一个框架,用于构建与共享消息传递系统连接的高度可扩展的事件驱动微服务。 该框架提供了一个灵活的编程模型,该模型建立在已经建立和熟悉的 Spring 习惯用语和最佳实践之上,包括对持久发布/订…

算法基础学习|双指针算法

双指针算法 代码模板 for (int i 0, j 0; i < n; i ){while (j < i && check(i, j)) j ;// 具体问题的逻辑 } 常见问题分类&#xff1a;(1) 对于一个序列&#xff0c;用两个指针维护一段区间(2) 对于两个序列&#xff0c;维护某种次序&#xff0c;比如归并…

Transformer and Pretrain Language Models3-1

content transformer attention mechanism transformer structure​​​​​​​ pretrained language models language modeling pre-trained langue models(PLMs&#xff09; fine-tuning approaches PLMs after BERT applications of masked LM frontiers of PLMs …

RocketMQ的一万字全面总结,带你快速入门消息队列

前言 近日偶然聊起消息队列&#xff0c;发现知识模糊又破碎&#xff0c;遂广泛查询资料&#xff0c;做了这么一篇非常浅显的总结&#xff0c;聊以充作入门参考资料吧。 下面几个问题&#xff0c;如果不能回答地很好&#xff0c;可以试着在文中找寻一下答案。&#xff08;答案…

时间序列大模型:TimeGPT

论文&#xff1a;https://arxiv.org/pdf/2310.03589.pdf TimeGPT&#xff0c;这是第一个用于时间序列的基础模型&#xff0c;能够为训练期间未见过的多样化数据集生成准确的预测。 大规模时间序列模型通过利用当代深度学习进步的能力&#xff0c;使精确预测和减少不确定性成为…

VSCode 更换默认的 terminal(终端)

Win10 中 VSCode 默认的 terminal 为 PowerShell, 想要更换为 Git bash。 1. 按快捷键&#xff1a;Ctrl Shift P 2. 搜索&#xff1a;“erminal: Select Default Profile” 3. 你会看到可选的终端列表&#xff0c;然后选择 Git Bash

3.Eureka注册中心

3.Eureka注册中心 假如我们的服务提供者user-service部署了多个实例&#xff0c;如图&#xff1a; 大家思考几个问题&#xff1a; order-service在发起远程调用的时候&#xff0c;该如何得知user-service实例的ip地址和端口&#xff1f;有多个user-service实例地址&#xff0…

JVM对象创建与内存回收机制

对象的创建过程有如下步骤&#xff1a; 1.类加载检查&#xff1a; 虚拟机遇到一个new指令时&#xff0c;首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用&#xff0c;并且检查这个符号引用代表的类是否已被加载、解析和初始化过&#xff0c;如果没…

长城资产信息技术岗24届校招面试面经

本文介绍2024届秋招中&#xff0c;中国长城资产管理股份有限公司的信息技术岗岗位一面的面试基本情况、提问问题等。 10月投递了中国长城资产管理股份有限公司的信息技术岗岗位&#xff0c;所在部门为长城新盛信托有限责任公司。目前完成了一面&#xff0c;在这里记录一下一面经…

函数递归(Recursion)一篇便懂

递归的概念 在 C 语言中&#xff0c;递归&#xff08;Recursion&#xff09;是一种函数调用自身的编程技术。当一个函数在其定义中调用自身时&#xff0c;就称为递归函数。 了解递归思想 把⼀个大型复杂问题层层转化为⼀个与原问题相似&#xff0c;但规模较小的子问题来求解…

3.chrony服务器

目录 1. 简介 1.1. 重要性 1.2. Linux的两个时钟 1.3. 设置日期时间 1.3.1. timedatectl命令设置 1.3.2. date命令设置 1.4. NTP 1.5. Chrony介绍 2. 安装与配置 2.1. 安装&#xff1a; 2.2. Chrony配置文件分析 2.3. 同步时间服务器 2.3.1. 授时中心 2.3.2. 实验…

制造业中的数据治理

随着信息技术的飞速发展&#xff0c;数据已经成为现代制造业的核心资产。数据治理作为确保数据质量、安全性、可靠性和一致性的关键过程&#xff0c;对于提高生产效率和质量控制具有不可忽视的影响。本文将深入探讨制造业中数据治理的重要性、挑战和实践&#xff0c;以揭示其对…

HCIP:不同VLAN下实现网络互相通信

配置pc1 配置pc2 配置pc3 将sw1划分到vlan3 将sw3划分到vlan3 在sw1上进行缺省 将sw1上&#xff08;g0/0/1&#xff09;的untagged改成 1 3 则在pc1上ping pc2可通 在sw1上进行缺省 在sw3上&#xff08;e0/0/1&#xff09;打标记 则在pc1上ping pc3可通&#xff08;实现互通&am…

新特性Record最全用法总结---动力节点总结

目录 0、有用的新特性 一、Record 1.1、Record的介绍&#xff1a; 1.2、Record的声明&#xff1a; 1.3、Record的创建&#xff1a; 1.4、Record使用举例&#xff1a; 1.5、Record-实例方法、静态方法 1.6、Record-三类构造方法 1.6.1、紧凑型构造、定制构造方法&#…

服务器的组成

服务器的重要结构组成 家用电脑组成&#xff1a; CPU、主板、内存条、显卡、硬盘、电源、风扇、网卡、显示器、机箱、键盘鼠标等等。 CPU CPU是电脑的大脑&#xff0c; CPU发展史&#xff1a; 32 位CPU&#xff1a;最大的内存寻址地址2^32&#xff0c;大约4G的大小。 CP…

爬虫进阶之selenium模拟浏览器

爬虫进阶之selenium模拟浏览器 简介环境配置1、建议先安装conda2、创建虚拟环境并安装对应的包3、下载对应的谷歌驱动以及与驱动对应的浏览器 代码setting.py配置scrapy脚本参考中间件middlewares.py 附录&#xff1a;selenium教程 简介 Selenium是一个用于自动化浏览器操作的…

CSS 楼梯弹弹球

<template><view class="loader"></view> </template><script></script><style>body {background-color: #212121;/* 设置背景颜色为 #212121 */}.loader {position: relative;/* 设置定位为相对定位 */width: 120px;/* 设…

38-WEB漏洞-反序列化之PHPJAVA全解(下)

WEB漏洞-反序列化之PHP&JAVA全解&#xff08;下&#xff09; 一、Java中API实现二、序列化理解三、案例演示3.1、本地3.2、Java 反序列化及命令执行代码测试3.3、WebGoat_Javaweb 靶场反序列化测试3.4、2020-网鼎杯-朱雀组-Web-think_java 真题复现 四、涉及资源 一、Java中…

springboot118共享汽车管理系统

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的共享汽车管理系统 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获…