移动端适配:vw适配方案

vw (Viewport Width) 是一种长度单位,代表视口宽度的百分比。1vw 等于视口宽度的1%。在网页设计和前端开发中,vw 单位常用于实现响应式设计和屏幕适配,尤其是针对不同尺寸和分辨率的移动设备。

为什么使用vw适配?

  1. 响应式: 使用vw可以确保元素的尺寸随浏览器窗口或设备屏幕的大小变化而按比例调整,实现良好的响应式布局。
  2. 简化计算: 相比于传统的像素单位,vw让开发者能够更直观地根据视口比例来设定元素尺寸,无需考虑具体像素值。
  3. 设计师与开发者对齐: 设计图上的百分比尺寸可以直接转换为vw单位,有助于设计与实现的一致性。

如何使用?

基于postcss插件,实现项目vw适配!

安装

npm install postcss-px-to-viewport --save-dev// 如果报错,就执行以下代码安装
// npm i postcss-px-to-viewport@1.1.1 -D --legacy-peer-depv

根目录下新建 postcss.config.js文件,填入配置

// postcss.config.js
module.exports = {plugins: [require('postcss-px-to-viewport')({viewportWidth: 375, // 视口宽度,对应设计稿的宽度,一般为设计稿宽度的1/10viewportHeight: 1334, // 视口高度,可选,一般不需要设置unitPrecision: 5, // 单位转换后的精度,即小数点后的位数viewportUnit: 'vw', // 转换后的单位selectorBlackList: ['.ignore', '.hairlines'], // 不进行转换的类名列表minPixelValue: 1, // 小于或等于这个值的px不转换为vwmediaQuery: false, // 是否在媒体查询的CSS代码中也进行转换,默认falsereplace: true, // 是否直接替换原始的px值,而不是添加备用的vw值exclude: /(node_modules|bower_components)/, // 忽略某些文件夹下的文件include: undefined, // 可以显式地包含某些文件或文件夹}),],
};

关于viewportWidth建议取设计稿的宽度,一般设计稿是750px,但是我们移动端屏幕一般宽度为375px(以iphone SE为基准),也就是屏幕实际1px对应设计稿2px,这样才能分配好设计稿的像素。

更新Vue配置(仅限Vue CLI)

如果使用Vue CLI,可能需要在vue.config.js中添加对PostCSS的配置,确保PostCSS被正确加载。对于Vue CLI 3及以上版本,配置通常是自动检测的,但如果需要手动配置,可以这样操作:

// vue.config.js
module.exports = {css: {loaderOptions: {postcss: {plugins: [require('postcss-px-to-viewport')({// 插件的配置选项同上}),],},},},
};

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

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

相关文章

互联网医院开发:引领智慧医疗新时代

随着科技的迅猛发展和互联网的普及,传统医疗模式正在迎来一场深刻的变革。互联网医院的崛起,打破了时间和空间的限制,为患者和医疗机构带来了更加便捷、高效、安全的医疗服务体验。本文将从技术角度深入探讨互联网医院的开发,包括…

【openpcdet中yaml文件的DATA_AUGMENTOR学习】

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、代码二、详细解释DISABLE_AUG_LISTAUG_CONFIG_LIST1. gt_sampling2. random_world_flip3. random_world_rotation4. random_world_scaling 总结 前言 提示…

多线程(八)

一、wait和notify 等待 通知 机制 和join的用途类似,多个线程之间随机调度,引入 wait notify 就是为了能够从应用层面上,干预到多个不同线程代码的执行顺序.( 这里说的干预,不是影响系统的线程调度策略 内核里的线程调度,仍然是无序的. 相当于是在应用程序…

Pod容器资源限制和探针

目录 一、资源限制 1.Pod和容器的资源请求和限制 2.CPU 资源单位 案例一 案例二 二、健康检查,又称为探针(Probe) 1.探针的三种规则 2.Probe支持三种检查方法 3.探测获得的三种结果 案例一:exec 案例二:htt…

OneMO同行 心级服务:中移物联OneMO模组助力客户终端寒冷环境下的稳定运行

中移物联OneMO模组以客户为中心,基于中国移动心级服务要求,开展“OneMO同行 心级服务 标定一流”高标服务主题活动,升级“服务内容““服务方式”和“服务意识”,为行业客户提供全新的服务体验。 近日,某车载监控设备…

Hive语法学习总结

Hive SQL语法学习总结 hive参数库操作1.创建库2.具体案例3.库的其他操作 表和库的路径演示表的操作创建表插入数据 hive参数 一 hive常用交互命令hive -e sql语句hive -f sql文件 //文件中是sql语句二 参数的设置方式一:在客户端中设置参数(当次有效)set 参数名参…

ACM实训第十七天

Is It A Tree? 问题 考试时应该做不出来,果断放弃 树是一种众所周知的数据结构,它要么是空的(null, void, nothing),要么是一个或的集合满足以下属性的节点之间有向边连接的节点较多。 •只有一个节点,称为根节点,它…

【Crypto】摩丝

文章目录 一、摩斯解题感悟 一、摩斯 很明显莫尔斯密码 iloveyou还挺浪漫 小小flag,拿下 解题感悟 莫尔斯密码这种题还是比较明显的

【董晓算法】竞赛常用知识之图论3(最近公共祖先)

前言: 本系列是学习了董晓老师所讲的知识点做的笔记 董晓算法的个人空间-董晓算法个人主页-哔哩哔哩视频 (bilibili.com) 动态规划系列(还没学完) 【董晓算法】动态规划之线性DP问题-CSDN博客 【董晓算法】动态规划之背包DP问题&#xff…

智能锁千千万,谁是你的NO.1,亲身实测凯迪仕传奇大师K70旗舰新品

智能锁千千万,谁是你的NO.1。欢迎来到智哪儿评测室,这次我们为大家带来了凯迪仕传奇大师K70系列的一款重磅新品。 在科技的浪潮中,家居安全领域正经历着前所未有的变革。智能锁越来越成为家的安全守护神,以及智能生活的得力助手。…

Android 11 Framework实时监听Activity堆栈变化

核心类 Framework中有一个类SystemActivityMonitoringService专门用于监控Activity堆栈变化,属于隐藏Api,应用侧无法调用。此类位于 packages/services/Car/service/src/com/android/car/SystemActivityMonitoringService.java 方法 void registerTa…

Mysql信息脱敏

类似微信姓名脱敏: SELECT CONCAT( REPEAT(*, CHAR_LENGTH(real_name) -1 ), RIGHT(real_name, 1) ) name from user_info电话号脱敏: SELECT CONCAT(LEFT(mobile_phone, 3), REPEAT(*, 4 ), RIGHT(mobile_phone, 4) ) phone from user_info

大数据Hive中的UDF:自定义数据处理的利器(下)

在上一篇文章中,我们对第一种用户定义函数(UDF)进行了基础介绍。接下来,本文将带您深入了解剩余的两种UDF函数类型。 文章目录 1. UDAF1.1 简单UDAF1.2 通用UDAF 2. UDTF3. 总结 1. UDAF 1.1 简单UDAF 第一种方式是 Simple(简单…

每日一题《leetcode--382.链表随机结点》

https://leetcode.cn/problems/linked-list-random-node/ 这道题我们首先看到题目中的要求:在单链表中随机选取一个链表中的结点,要使每个结点被选取的概率是一样的。 当我们看到随机这两个字时,应该就会想起rand()这个函数。接着我们把使用这…

[晕事]今天做了件晕事35 VM发送给gateway太多ARP,导致攻击检查?

最近遇到一个问题,说网关学不到新起来VM的mac地址,通过tshark抓包发现,VM已经发出去GARP了。而且连续发送了24个GARP。 就认为是网关的问题,为什么没网关没有学到?就让测试同事开网络设备的ticket。 后来听同事说&…

自己搭建内网穿透

本文介绍使用最新版frp搭建内网穿透,最新版本的frp在配置上与之前有很大不同,需要使用.toml文件进行配置。其中主要问题出现在toml文件内部。 一、云服务器配置 下载frp sudo apt update sudo apt install wget wget https://github.com/fatedier/frp…

求出这行英文中最后一个单词的长度

【题目描述】蓝宝看到了一行奇怪的英文,这行英文由若干单词组成,每个单词前后用一些字符*隔开请帮助蓝宝求出这行英文中最后一个单词的长度。【输入格式】 输入一行,就就是蓝宝看到的奇怪的英文。 【输出格式】 输出一行,是个整数…

文旅3d仿真数字人形象为游客提供全方位的便捷服务

在AI人工智能与VR虚拟现实技术的双重驱动下,文旅3D数字代言人正以其独特的魅力,频频亮相于各类文旅场景,为游客带来前所未有的个性化服务体验。他们不仅有趣有品,更能言善道,成为文旅业数字化发展的新亮点。 这些文旅3…

Android 文件加密解密(AES)

private static final String ALGORITHM "AES"; 文件加密 /*** 文件加密* param secretKey 文件加密密钥* param oldFiles 原始文件列表,需要加密的* param newFiles 构造加密后的文件列表*(选择多个或者单个)多个文件加密*/ Re…

我的文章分类合集目录

文章目录 Java相关基础常规问题类Docker类RabbitMQ类分库分表 网络工程相关路由交换、Cisco Packet TracerIP地址 前端相关数据库 Java相关 基础 Java开发规范、项目开发流程 SpringBoot整合MyBatis实现增删改查(简单,详细) SpringBoot整合MybatisPlus(详细&#…