Vue移动端项目——Vant 移动端 REM 适配

Vant官方文档

在这里插入图片描述

Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：

postcss-pxtorem 是一款 postcss 插件，用于将 px 单位转化为 rem
lib-flexible 用于设置 rem 基准值

下面我们分别将这两个工具配置到项目中完成 REM 适配。

（1）使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）

安装依赖：

# yarn add amfe-flexible
npm i amfe-flexible

然后在 main.js 中加载执行该模块：

import 'amfe-flexible'

最后测试：在浏览器中切换不同的手机设备尺寸，观察 html 标签 font-size 的变化。
在这里插入图片描述

例如在 iPhone 6/7/8 设备下，html 标签字体大小为 37.5 px
在这里插入图片描述
例如在 iPhone 6/7/8 Plus 设备下，html 标签字体大小为 41.4 px
（2）使用 postcss-pxtorem 将 px 转为 rem

安装依赖：

# yarn add -D postcss-pxtorem
# -D 是 --save-dev 的简写
npm install postcss-pxtorem -D

然后在项目根目录中创建 postcss.config.js 文件：

module.exports = {plugins: {'autoprefixer': {browsers: ['Android >= 4.0', 'iOS >= 8']},'postcss-pxtorem': {rootValue: 37.5,propList: ['*']}}
}

配置完毕，重新启动服务。

最后测试：刷新页面，审查元素样式查看是否已将 px 转换为 rem。
在这里插入图片描述

这是没有配置转换之前的。

在这里插入图片描述

这是转换之后的，可以看到 px 都被转换为了 rem。

需要注意的是：

该插件不能转换行内样式中的 px，例如 <div style="width: 200px;"></div>

关于 PostCSS 配置文件

postcss.config.js 是 PostCSS 的配置文件。

/*
* PostCSS的配置文件
* PostCSS 是基于 Node.js 运行的一个处理CSS的工具
* 所以他的配置文件也是运行在Node.js中
* */// PostCSS 配置文件需要导出一个对象
module.exports = {// 配置要使用的相关的插件plugins: {// 自动添加浏览器厂商声明前缀，用来兼容不同的浏览器// VueCli 已经在内部默认配置了 autoprefixerautoprefixer: {// browsers 用来配置要兼容到的系统（浏览器）环境browsers: ['Android >= 4.0', 'iOS >= 8']},// 把 px 转为 rem'postcss-pxtorem': {rootValue: 37.5,propList: ['*']}}
}

在这里插入图片描述

PostCSS 介绍

PostCSS 是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。

PostCSS 被广泛地应用，其中不乏很多有名的行业领导者，如：维基百科，Twitter，阿里巴巴， JetBrains。PostCSS 的 Autoprefixer 插件是最流行的 CSS 处理工具之一。

PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则（通过把 CSS 规则转换成一个抽象语法树的方式）。在这之后，这个 API 便可被许多插件利用来做有用的事情，比如寻错或自动添加 CSS vendor 前缀。

截止到目前，PostCSS 有 200 多个功能各异的插件。你可以在 插件列表 或 搜索目录 找到它们。

PostCSS 是一个处理 CSS 的处理工具，本身功能比较单一，它主要负责解析 CSS 代码，再交由插件来进行处理，它的插件体系非常强大，所能进行的操作是多种多样的，例如：

Autoprefixer 插件可以实现自动添加浏览器相关的声明前缀
PostCSS Preset Env 插件可以让你使用更新的 CSS 语法特性并实现向下兼容
postcss-pxtorem 可以实现将 px 转换为 rem
…

PostCSS 一般不单独使用，而是与已有的构建工具进行集成。

Vue CLI 默认集成了 PostCSS，并且默认开启了 autoprefixer 插件。

Vue CLI 内部使用了 PostCSS。
你可以通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。
我们默认开启了 autoprefixer。如果要配置目标浏览器，可使用 package.json 的 browserslist 字段。

Autoprefixer 插件的配置

在这里插入图片描述

autoprefixer 是一个自动添加浏览器前缀的 PostCss 插件，browsers
用来配置兼容的浏览器版本信息，但是写在这里的话会引起编译器警告。

Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.Using browsers option can cause errors. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.If you really need to use option, rename it to overrideBrowserslist.Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist

警告意思就是说你应该将 browsers 选项写到 package.json 或 .browserlistrc 文件中。

browserslist：
你会发现有 package.json 文件里的 browserslist 字段 (或一个单独的
.browserslistrc 文件)，指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和
Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

在这里插入图片描述

参考官方文档中的语法，我们将 .browserslistrc 修改如下：
在这里插入图片描述

postcss-pxtorem 插件的配置

在这里插入图片描述

  • rootValue：表示根元素字体大小，它会根据根元素大小进行单位转换
  • propList 用来设定可以从 px 转为 rem 的属性
    例如 * 就是所有属性都要转换，width 就是仅转换 width 属性

rootValue 应该如何设置呢？
如果你使用的是基于 lib-flexable 的 REM 适配方案，则应该设置为你的设计稿的十分之一。
例如设计稿是 750 宽，则应该设置为 75。

大多数设计稿的原型都是以 iPhone 6 为原型，iPhone 6 设备的宽是 750，我们的设计稿也是这样。

但是 Vant 建议设置为 37.5，为什么呢？
因为 Vant 是基于逻辑像素 375 写的，所以如果你设置为 75 的话，Vant 的样式就小了一半。
所以如果设置为 37.5 的话，Vant 的样式是没有问题的，但是我们在测量设计稿的时候都必须除2才能使用，否则就会变得很大。

有没有更好的办法不用除以2呢？当然有了，这里给大家介绍两种方式，一种不用写代码，一种需要写代码。

（1）不用写代码的方式

在 Photoshop 中打开单位与标尺设置面板：菜单栏 -> 编辑 -> 首选项 -> 单位与标尺。
在这里插入图片描述
将单位中的标尺和文字的单位修改为点。

打开设置图像大小面板：

菜单栏 -> 图像 -> 图像大小
快捷键：Alt + Ctrl + I

在这里插入图片描述
关闭重新采样
将宽度单位设置为点
将高度单位设置为点
将宽度修改为 375，高度不用动（它会适应宽度自动调整）
点击确定完成修改。

调整之后，我们可以看到图像的大小变成了 375 点 x 667 点（144 ppi）。

在 iPhone 6/7/8 设备下，1个点 = 2个物理像素，所以你看到我们导出的图片还是原来的二倍图。

（2）写代码的方式（自行了解）

通过查阅文档我们可以看到 rootValue 支持两种参数类型：

数字：固定值
函数：动态计算返回
有一个默认参数：一个对象，其中包含一个 file 属性（编译的文件路径）

所以我们可以这样来处理它：

module.exports = {plugins: {'postcss-pxtorem': {rootValue ({ file }) {// 如果是 Vant 的样式就按照 37.5 处理转换// 如果是我们自己的样式就按照 75 处理转换return file.indexOf('vant') !== -1 ? 37.5 : 75},propList: ['*']}}
}

这种方式不方便调试。因为在调试面板中看到的都是逻辑像素大小，它和 750 物理像素设计稿不一致，无法很好的利用调试工具。

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

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

相关文章

Win7_刻录DVD

Win7_刻录DVD

1、刻录 临时文件夹&#xff1a; 1.1、C:\Users\具体的用户名\AppData\Local\Microsoft\Windows\Burn 1.2、双击 插入刻录盘的光驱&#xff0c;直接将文件复制到 这里&#xff0c;实际上也就是 复制到 上面的文件夹中。 2、UltraISO 的 路径&#xff1a; C:\Users\33\AppData\L…
阅读更多...
findbugs使用_FindBugs，一个帮你找bug的IDEA插件

findbugs使用_FindBugs，一个帮你找bug的IDEA插件

前言 Findbugs很多人都并不陌生&#xff0c;Eclipse中有插件可以帮助查找代码中隐藏的bug&#xff0c;IDEA中也有这款插件。这个插件可以帮助我们查找隐藏的bug,比较重要的功能就是查找潜在的null指针。 在编写代码的过程中,我们可能不会一直记得检查空的引用,在我们测试时可能…
阅读更多...
Vue移动端项目——字体图标的使用

Vue移动端项目——字体图标的使用

使用 iconfont 制作字体图标 设计师为我们单独提供了设计稿中的图标&#xff0c;为了方便使用&#xff0c;我们在这里把它制作为字体图标。 制作字体图标的工具有很多&#xff0c;在这里我们推荐大家使用&#xff1a;https://www.iconfont.cn/。 &#xff08;1&#xff09;登…
阅读更多...
docker 虚拟机搭建mongodb一主一从一复制_云计算学习路线图素材课件：Docker容器应用场景分析...

docker 虚拟机搭建mongodb一主一从一复制_云计算学习路线图素材课件：Docker容器应用场景分析...

Docker容器是一个开源的应用容器引擎&#xff0c;它能够自动执行重复性任务&#xff0c;例如搭建和配置开发环境&#xff0c;用户可以方便地创建和使用容器&#xff0c;还可以进行版本管理、复制、分享、修改。有很多初学云计算的同学不清楚Docker容器的使用方法以及应用场景&a…
阅读更多...
Vue项目中 css样式的作用域（深度作用选择器）

Vue项目中 css样式的作用域（深度作用选择器）

vue官方文档 父组件对子组件设置的样式&#xff0c;只能作用到子组件的根节点上&#xff01;&#xff01;&#xff01;
阅读更多...
git 提交文件_git原理与实战

git 提交文件_git原理与实战

一&#xff0c;序言之前在工作中也接触过git&#xff0c;但是没有在现公司这里用的功能这么多。主要的差异体现在如下两个方面&#xff1a;1&#xff0c;之前公司使用git主要基于图形用户界面&#xff0c;这对于处理冲突非常有帮助&#xff0c;不太容易改错地方&#xff1b;而现…
阅读更多...
CSS——设置第一个以外的元素样式:not(:first-child),设置最后一个除外的元素样式:not(:last-child)

CSS——设置第一个以外的元素样式:not(:first-child),设置最后一个除外的元素样式:not(:last-child)

设置第一个以外的元素样式:not(:first-child),设置最后一个除外的元素样式:not(:last-child)
阅读更多...
CPU结构与指令执行过程简介

CPU结构与指令执行过程简介

CPU&#xff08;Central Processing Unit&#xff09;是计算机中进行算术和逻辑计算处理指令的主要部件. CPU结构 CPU由通用寄存器组,运算器,控制器和数据通路等部件组成. 寄存器包括 数据寄存器: AX&#xff0c;BX&#xff0c;CX&#xff0c;DX; 指针与变址寄存器:SP, BP, SI,…
阅读更多...
mysql连接池_数据库技术：数据库连接池，Commons DbUtils，批处理，元数据

mysql连接池_数据库技术：数据库连接池，Commons DbUtils，批处理，元数据

Database Connection PoolIntroduction to Database Connection Pool实际开发中“获得连接”或“释放资源”是非常消耗系统资源的两个过程&#xff0c;为了解决此类性能问题&#xff0c;通常情况我们采用连接池技术&#xff0c;来共享连接 Connection。这样我们就不需要每次都创…
阅读更多...
关于第三方图片资源403问题

关于第三方图片资源403问题

为什么文章列表数据中的好多图片资源请求失败返回 403&#xff1f; 这是因为我们项目的接口数据是后端通过爬虫抓取的第三方平台内容&#xff0c;而第三方平台对图片资源做了防盗链保护处理。 1. 第三方平台怎么处理图片资源保护的&#xff1f; 服务端一般使用 Referer 请求头…
阅读更多...
hdfs复制文件夹_HDFS常用命令

hdfs复制文件夹_HDFS常用命令

一.HDFS命令行Hadoop help命令的使用1.hadoop -help查询所有Hadoop Shell支持的命令2.distcp这是Hadoop下的一个分布式复制程序&#xff0c;可以在不t同的HDFS集群间复制数据&#xff0c;也可以在本地文件间复制数据。hadoop distcp将/test/test.txt文件复制到/test/cp下面&…
阅读更多...
处理相对时间(Day.js、Moment.js)（案例：结合vue的过滤器使用）

处理相对时间(Day.js、Moment.js)（案例：结合vue的过滤器使用）

推荐两个第三方库&#xff1a; Moment.jsDay.js 两者都是专门用于处理时间的 JavaScript 库&#xff0c;功能差不多&#xff0c;因为 Day.js 的设计就是参考的 Moment.js。但是 Day.js 相比 Moment.js 的包体积要更小一些&#xff0c;因为它采用了插件化的处理方式。 Day.js…
阅读更多...
下载 嵌入式qt实战教程pdf_Qt之JSON教程-实战篇

下载 嵌入式qt实战教程pdf_Qt之JSON教程-实战篇

以实战例子讲述JSON三兄弟的后续故事。实战一&#xff1a;发送JSON网络请求作为JSON老大哥的QJsonValue自知对面的大户人家妹子貌美如花&#xff0c;心里已经打起算盘&#xff0c;先下手为强&#xff0c;后下手遭殃。决定显示下自己的家底&#xff0c;想起这件事&#xff0c;老…
阅读更多...
Vue移动端项目——搜索联想建议功能的实现（结合watch属性和使用lodash防抖节流）

Vue移动端项目——搜索联想建议功能的实现（结合watch属性和使用lodash防抖节流）

搜索联想建议 1. 基本思路&#xff1a; 当搜索框输入内容的时候&#xff0c;请求加载联想建议的数据 将请求得到的结果绑定到模板中 2. 基本功能 一、将父组件中搜索框输入的内容传给联想建议子组件 二、在子组件中监视搜索框输入内容的变化&#xff0c;如果变化则请求获取…
阅读更多...
.net get set 初始化_.NET项目升级：可为空引用

.net get set 初始化_.NET项目升级：可为空引用

(给DotNet加星标&#xff0c;提升.Net技能)转自&#xff1a;波多尔斯基cnblogs.com/podolski/p/12692888.html前言C#8引入了新特性&#xff1a;可为空引用https://docs.microsoft.com/zh-cn/dotnet/csharp/nullable-references这个功能个人觉得挺好的&#xff0c;能够非常明确的…
阅读更多...
用GDB排查Python程序故障

用GDB排查Python程序故障

某Team在用Python开发一些代码&#xff0c;涉及子进程以及设法消除僵尸进程的需求。实践中他们碰上Python程序非预期退出的现象。最初他们决定用GDB调试Python解释器&#xff0c;查看exit()的源头。我听了之后&#xff0c;觉得这个问题应该用别的调试思路。帮他们排查这次程序故…
阅读更多...
解决后端返回数据中的大数字问题(使用第三方包json-bigint ）

解决后端返回数据中的大数字问题(使用第三方包json-bigint ）

JavaScript 能够准确表示的整数范围在-2^53到2^53之间&#xff08;不含两个端点&#xff09;&#xff0c;超过这个范围&#xff0c;无法精确表示这个值&#xff0c;这使得 JavaScript 不适合进行科学和金融方面的精确计算。 Math.pow(2, 53) // 90071992547409929007199254740…
阅读更多...
java 静态代码块_关于Java你不知道的那些事之代码块

java 静态代码块_关于Java你不知道的那些事之代码块

前言普通代码块&#xff1a;在方法或语句中出现的{}&#xff0c;就被称为代码块静态代码块&#xff1a;静态代码块有且仅加载一次&#xff0c;也就是在这个类被加载至内存的时候普通代码块和一般语句执行顺序由他们在代码中出现的次序决定&#xff0c;先出现先执行代码一/**对于…
阅读更多...
Vue项目开发过程中解决跨域问题（vue.config.js结合axios）

Vue项目开发过程中解决跨域问题（vue.config.js结合axios）

一、问题描述 在本地开发过程中&#xff0c;调用后端提供的接口获取数据将获取的数据渲染到页面中&#xff0c;但是浏览器报错&#xff1a; // 控制台报错信息 Access to XMLHttpRequest at http://x.x.x.x/app/v1_0/user/followings from origin http://localhost:8080 has…
阅读更多...
WebSocket实现实时通信

WebSocket实现实时通信

WebSocket 是一种数据通信协议&#xff0c;也是用于客户端和服务端数据通信&#xff0c;类似于我们常见的 http 既然有 http&#xff0c;为啥还要 WebSocket http 通信是单向的 请求 响应 没有请求也就没有响应 初次接触 WebSocket 的人&#xff0c;都会问同样的问题&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023