WebApp 使用post-css实现移动端适配

1、npm安装 post-css

npm i postcss autoprefixer postcss-pxtorem -D

2、新建配置文件 postcss.config.js

/* eslint-env node */module.exports = {plugins: {autoprefixer: {overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']},'postcss-pxtorem': {// 根节点的 fontSize 值rootValue: 16,propList: ['*'],selectorBlackList: [':root']}}
}

3、 main.js中加入

// 实现不同设备的适配
const rootValue = 16     // 1rem
const rootWidth = 390    // 设计稿宽度
const deviceWidth = document.documentElement.clientWidth  //用户宽度
document.documentElement.style.fontSize = (deviceWidth * rootValue) / rootWidth + 'px'

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Spring:了解@Import注解的三种用法

一、前言 在 Spring 框架中,Import 注解用于导入配置类,使得你可以在一个配置类中引入另一个或多个配置类,从而实现配置的模块化。这对于组织大型应用程序的配置非常有用,因为它允许你将配置分散到多个类中,然后再将它…

C语言如何创建⼀个动态链表?

一、问题 创建动态链表就是指在程序执⾏过程中,从⽆到有,按照需求开辟结点和输⼊各结点数据,并建⽴起前后相连接的关系。那么,如何创建动态链表呢? 二、解答 以建⽴⼀个有任意名学⽣数据的单向动态链表为例&#xff0…

好用的Tipard 蓝光转换器 (Tipard Blu-ray Converter) mac&win

Tipard Blu-ray Converter 是一款令人惊叹的蓝光解决方案软件,可将蓝光光盘/文件夹转换为 1:1 质量的数字格式,速度提高 30 倍,用于 4K UHD 和 1080p 高清视频。它可以将蓝光光盘和文件夹中的蓝光电影转换为MKV、MP4、WMV、MOV、AVI、FLV、VO…

0.98T优于10米高程DEM数据

我们在《全球30米100%水陆覆盖高程》一文中,为大家分享了全球100%覆盖,且包括海底高程的30米DEM数据。 该数据虽然全球无死角覆盖,但分辨率只有30米。 这里,再为大家分享一个优于10米的高程数据,但目前仅覆盖全国范围…

华为设备使能Auto-Config功能

Auto-Config is working. Before configuring the device, stop Auto-Config. If you perform configurations when Auto-Config is running, the DHCP, routing, DNS, and VTY configurations will be lost. Do you want to stop Auto-Config? [y/n] 背景信息 此任务的应用场…

jumpserver接入ldap

ldap部署 基本安装和人员导入 1.CentOS7安装配置OpenLDAP与phpLDAPadmin (koomu.cn) 2.https://koomu.cn/centos7-install-openldap-server-and-phpldapadmin/ https://senmer.github.io/zh/posts/tech/ldap/openldap%E5%AE%89%E8%A3%85%E5%92%8C%E4%BD%BF%E7%94%A8/#%e4%b8%…

怎么做微信预约链接_微信预约新风尚

在快节奏的现代生活中,我们都渴望找到一种既方便又高效的方式来处理日常事务。无论是预约看病、预约美容,还是预约一场心仪的讲座或活动,我们都希望能够一键搞定,省时省力。今天,就让我来为大家揭秘如何制作一个微信预…

Windows 安装mysql 和 Redis

mysql Windows 图形界面安装: 下载mysql https://dev.mysql.com/downloads/ 1.下载完成后,找到文件双击安装程序 2. 等待一段时间, 选择默认,点击next 3. 选择安装目录 下载mysql产品 安装mysql产品 产品配置向导 安装…

恒创科技:域名CNAME解析和A记录解析有哪些区别?

​  域名是互联网上的一种地址,是用以替代复杂IP地址的字符标识,在进行域名解析时,主要有两种常见的记录类型:CNAME 记录和 A记录解析。今天就给大家讲下CNAME解析和A记录解析有哪些区别、优势。这里,我们先了解下什…

R实验 基础(二)

实验目的: 掌握向量的几种类型:数值向量、逻辑向量、字符向量、复数向量;掌握生成向量几个的函数使用和向量的下标运算;掌握因子的定义和相关函数的使用。 实验内容: R语言中,数值向量用得非常多。生成数…

基于QEMU-aarch64学习UEFI(EDK2)-2安装操作系统

1 基于QEMU-aarch64学习UEFI(EDK2)-2安装操作系统 文章目录 1 基于QEMU-aarch64学习UEFI(EDK2)-2安装操作系统1.1 二、基于qemu固件安装操作系统1.1.1 1、virt-manager安装1.1.2 2、创建虚拟机1.1.2.1 Ubuntu系统开机等待时间长问题解决 1.1.3 3、virt-manager日常使用1.1.4 4、…

Moe 混合多专家模型 原理 + 大模型的有性繁殖

Moe 混合多专家模型 原理 大模型的有性繁殖 MoE 介绍标准 Transformer 编码器MoE Transformer 编码器专家网络层 大模型的有性繁殖mergekit 合并 多个专家模型 的方式1. SLERP(球面线性插值)2. TIES3. DARE4. Passthrough5. Linear mergekit 合并 多个专…

go语言数组与切片

1.数组 数组 类型名是[n]elemetType,其中n是数组长度,elementType是数组元素类型。比如一个包 含2个int类型元素的数组类型可表示为[2]int。 数组一般在创建时通过字面量初始化,单独声明一个数组类型变量而不进行初始化是没有意义的。 packa…

全国老年大学或将进入“5G智慧校园“时代

近日,我国晚年大学协会在北京举行官网改版上线典礼,一起这也标志着我国晚年大学协会及全国晚年大学进入了“5G智慧校园”年代。据了解,5G智慧校园以“云”技能为根底,全面落实数字云、办理云、安全云。 “三朵云”助推5G智慧校园&…

Find My资讯|苹果 iOS 17.5 率先执行跨平台反跟踪器标准

苹果和谷歌公司于 2023 年 5 月宣布推出“检测预期外位置追踪器”(Detecting Unwanted Location Trackers)行业标准,经过 1 年多的打磨之后,该标准目前已通过 iOS 17.5 部署到 iPhone 上。谷歌也将为运行 Android 6.0 或更高版本的…

web安全学习笔记(16)

记一下第27-28课的内容。Token 验证 URL跳转漏洞的类型与三种跳转形式;URL跳转漏洞修复 短信轰炸漏洞绕过挖掘 一、token有关知识 什么是token?token是用来干嘛的?_token是什么意思-CSDN博客 二、URL跳转漏洞 我们在靶场中,…

Originx的创新解法之:应用程序故障篇

Originx并不期望做一个完整覆盖全栈的监控体系,而是利用北极星指标体系标准化找出故障方向,然后联动各种成熟的监控数据形成证据链条,并将各种数据融合在一个故障报告之中。更多信息请参考 Log | Metrics | Trace的联动方式探讨http://mp.wei…

KING大咖直播 | KES RAC如何成为核心系统首选?

核心系统负载高 停机代价大 KES RAC来了 KingbaseES共享存储集群 不仅满足您对数据库 扩展性与可用性的严苛要求 更能在保障性能的同时 实现低成本、高效益 是企业核心系统的理想选择 5月16日19:30-20:30 锁定金仓数据库视频号 人大金仓高级研发工程师 深度揭秘如何实现 Kingba…