1-08 移动端适配 rem+vm

移动端适配 rem+vm

React配置postcss-px-to-viewport

  1. 安装依赖:在项目根目录下运行以下命令安装所需的依赖包:
npm install postcss-px-to-viewport --save-dev
  1. 配置代码
const path = require('path');module.exports = {webpack: {alias: {'@': path.resolve(__dirname, 'src'),},},style: {postcss: {mode: 'exclude',loaderOptions: {postcssOptions: {ident: 'postcss',plugins: [['postcss-px-to-viewport',{unitToConvert: 'px', // 要转化的单位viewportWidth: 375, // UI设计稿的宽度viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用 remfontViewportUnit: 'vw', // 字体使用的视口单位unitPrecision: 13, // 指定`px`转换为视窗单位值的小数后 x位数// propList: 当有些属性的单位我们不希望转换的时候,可以添加在数组后面,并在前面加上!号,如propList: ["*","!letter-spacing"],这表示:所有css属性的属性的单位都进行转化,除了letter-spacing的propList: ['*'], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换// 转换的黑名单,在黑名单里面的我们可以写入字符串,只要类名包含有这个字符串,就不会被匹配。比如selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper这样的类名的单位,都不会被转换selectorBlackList: ['ignore'], // 指定不转换为视窗单位的类名,minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认falsereplace: true, // 是否转换后直接更换属性值exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配landscape: false, // 是否处理横屏情况},],],},},},},
};
  1. 重新启动开发服务器:如果你的开发服务器正在运行,请重新启动它以应用新的配置。

在这里插入图片描述

之后当我们写px时会自动转换成vm单位

rem适配

视口标签

<meta name='viewpoint' content='width=device-width,initial-scale=1.0'>

CSS媒体查询

@meta (width:100px){html{font-size:12px}
}

动态计算大小

const viewportWidth = 375; // 定义设计稿宽度window.onresize = (unction adapter(){//获取布局视口宽度const dpWidth = window.innerWidth || document.documentElement.clientWidth//计算根字体大小const rootFonstSize = (dpWidth * 10)/viewportWidth//设置根字体大小document.documentElement.style.fontSize = rootFonstSize + 'px'
}

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

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

相关文章

tuxera ntfs2024破解版mac电脑磁盘读写软件

大家都知道由于操作系统的原因&#xff0c;在苹果电脑上不能够读写NTFS磁盘&#xff0c;但是&#xff0c;今天小编带来的这款tuxera ntfs 2024 mac版&#xff0c;完美的解决了这个问题。这是一款在macOS平台上使用的磁盘读写软件&#xff0c;能够实现苹果Mac OS X系统读写Micro…

计算机组成原理(一目了然的顶级总纲)(持续更新!)

文章目录 886冯诺依曼计算机计算机的五大部件&#xff08;又称五大字系统&#xff09;细化的计算机组成框图存储器 886 计算机系统由“硬件”和“软件”两大部分组成。 计算机的软件通常又可以分为两大类&#xff1a;系统软件和应用软件。 冯诺依曼计算机 数学家冯诺依曼&am…

1-07 React配置postcss-px-to-viewport

React配置postcss-px-to-viewport 移动端适配 安装依赖&#xff1a;在项目根目录下运行以下命令安装所需的依赖包&#xff1a; npm install postcss-px-to-viewport --save-dev配置代码 const path require(path);module.exports {webpack: {alias: {: path.resolve(__di…

软考系列(系统架构师)- 2021年系统架构师软考案例分析考点

试题一 软件架构&#xff08;架构风格、质量属性&#xff09; 【问题1】&#xff08;9分&#xff09; 在架构评估过程中&#xff0c;质量属性效用树(utility tree)是对系统质量属性进行识别和优先级排序的重要工具。 请将合适的质量属性名称填入图1-1中(1)、(2)空白处&#xf…

蓝桥杯每日一题0223.10.23

第几天 - 蓝桥云课 (lanqiao.cn) 题目描述 题目分析 简单枚举&#xff08;用k来记录经过的天数&#xff09; #include<bits/stdc.h> using namespace std; bool is_ren(int n) {if(n % 400 0 || (n % 4 0 && n % 100 ! 0))return true;return false; } int …

Towards a Rigorous Evaluation of Time-series Anomaly Detection(论文翻译)

1 Introduction 随着工业4.0加速系统自动化&#xff0c;系统故障的后果可能会产生重大的社会影响&#xff08;Baheti和Gill 2011; Lee 2008; Lee&#xff0c;Bagheri和Kao 2015&#xff09;。为了防止这种故障&#xff0c;检测系统的异常状态比以往任何时候都更加重要&#xff…

电脑待办事项提醒工具用哪个?

在一个繁忙的办公楼里&#xff0c;人们匆匆忙忙地穿梭着&#xff0c;电脑屏幕前的每个人都有着繁重的工作任务。为了应对这些任务&#xff0c;有人喜欢在纸上列出清单&#xff0c;有人则更愿意在电脑上记录&#xff0c;日常记录待办事项建议大家可以使用提醒工具敬业签。 敬业…

IP地址在各行业中的常见应用场景

IP地址在各行业中有多种应用场景&#xff0c;它不仅用于标识和定位设备&#xff0c;还用于实现各种功能和服务。以下是IP地址在不同行业中的一些应用场景&#xff1a; 互联网和通信行业&#xff1a; 网络寻址和标识&#xff1a; IP地址是互联网上的设备的唯一标识符&#xff0…

【Git】idea提交项目到Gitee

文章目录 1. 创建Gitee仓库1. 新建仓库2. 添加描述3. 复制仓库地址 2. idea建立连接提交2.1 Create Git Repository2.2 选择要提交的根目录2.3 Commit2.4 Push2.5 提交成功 1. 创建Gitee仓库 1. 新建仓库 2. 添加描述 3. 复制仓库地址 点击右上角克隆/下载&#xff0c;复制HT…

SparkSQL之LogicalPlan概述

逻辑计划阶段在整个流程中起着承前启后的作用。在此阶段&#xff0c;字符串形态的SQL语句转换为树结构形态的逻辑算子树&#xff0c;SQL中所包含的各种处理逻辑&#xff08;过滤、剪裁等&#xff09;和数据信息都会被整合在逻辑算子树的不同节点中。逻辑计划本质上是一种中间过…

配置公网和私网用户通过非公网口的IP地址访问内部服务器和Internet示例

组网需求 如配置公网和私网用户通过非公网口的IP地址访问内部服务器和Internet示例所示&#xff0c;某小型企业内网部署了一台路由器、一台FTP服务器和一台Web服务器。路由器作为接入网关&#xff0c;为下挂的内网用户提供上网服务&#xff0c;主要包括浏览网页、使用即时通信…

墨西哥专线:国产商品迅速开拓墨西哥市场的基础

随着全球贸易的不断发展&#xff0c;越来越多的中国企业开始将目光投向海外市场。墨西哥作为北美洲的重要国家&#xff0c;拥有庞大的消费市场和广阔的发展空间&#xff0c;对于中国企业来说&#xff0c;无疑是一个极具潜力的市场。然而&#xff0c;如何让国产商品在这个市场上…

基于ElasticSearch+Vue实现简易搜索

基于ElasticSearchVue实现简易搜索 一、模拟数据 产品名称描述价格库存数量品牌名称智能手表智能手表&#xff0c;具有健康跟踪和通知功能。199.991000TechWatch4K智能电视4K分辨率智能电视&#xff0c;提供出色的画质。699.99500VisionTech无线耳机降噪无线耳机&#xff0c;…

若依和芋道

国外卷技术,国内卷业务,做管理业务通常使用开源框架就可以快速满足,若依和芋道都是开源二开工具较为流行的框架,芋道是基于若依的,基本上是开发人员自己写业务开发框架的天花板,两者的前端都是基于vue-element-admin的,使用Gitee上两者的SpringBoot的最轻量化版本进行对…

485modbus转profinet网关连三菱变频器modbus通讯配置案例

本案例介绍了如何通过485modbus转profinet网关连接威纶通与三菱变频器进行modbus通讯。485modbus转profinet网关提供了可靠的连接方式&#xff0c;使用户能够轻松地将不同类型的设备连接到同一网络中。通过使用这种网关&#xff0c;用户可以有效地管理和监控设备&#xff0c;从…

VR航天科普主题公园模拟太空舱体验馆vr航天模拟体验设备

VR航天航空体验馆巡展是一项非常受欢迎的展览活动&#xff0c;可以让公众在现场体验到航天飞行的乐趣。 普乐蛙VR展览组织者会设计一个航天航空主题的VR体验馆&#xff0c;并在馆内设置各种航天航空相关的展示内容&#xff0c;如太空舱、火箭发射、星际航行等。 其次&#xff0…

【机器学习合集】泛化与正则化合集 ->(个人学习记录笔记)

文章目录 泛化与正则化1. 泛化(generalization)2. 正则化方法2.1 显式正则化方法显式正则化方法对比提前终止模型的训练多个模型集成Dropout技术 2.2 参数正则化方法2.3 隐式正则化方法方法对比 泛化与正则化 1. 泛化(generalization) 泛化不好可能带来的问题 模型性能不稳定容…

css伪类元素使用技巧 表达input父级聚焦css实现

:focus-within 可以让它自己被聚焦或者它的后代元素被聚焦input 中有required 加星号在这里插入图片描述

高压放大器在扫描显微镜中的应用及优势是什么

随着科技的不断进步&#xff0c;扫描显微镜成为了现代显微镜技术的重要组成部分。它能够提供更高的分辨率、更广的视场和更强的功能&#xff0c;用于研究各种微观结构和材料的特性。而高压放大器在扫描显微镜系统中发挥着至关重要的作用。下面安泰电子Aigtek将详细介绍高压放大…

一百九十二、Flume——Flume数据流监控工具Ganglia单机版安装

一、目的 在安装好Flume之后&#xff0c;需要用一个工具可以对Flume数据传输进行实时监控&#xff0c;这就是Ganglia 二、Ganglia介绍 Ganglia 由 gmond、gmetad 和 gweb 三部分组成。 &#xff08;一&#xff09;第一部分——gmond gmond&#xff08;Ganglia Monitoring Da…