REM适配

基础配置

在页面布局之前,对REM进行配置,以适配移动端特点。

官方参考 Vant文档---->快速上手---->进阶用法---->Rem适配---->

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

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

注意:rem单位值 = px像素值 / rootValue。

postcss-pxtorem

postcss-pxtorem 是一款 postcss 插件,用于将px单位转化为 rem。

使用步骤:

(1)安装:npm i amfe-flexible     和    npm i -D postcss-pxtorem

(2)main.js 引入如下内容:import 'amfe-flexible/index.min.js'

此时,审查元素会看到切换不同设备时,html的font-size会随着页面大小改变而变化,大小是页面实际宽度的 1/10。注意:​ 元素实际大小 = rem * 基准值

动态rootValue

开发中遇到问题:

(1)posttorem的rootValue仍然为37.5,设计稿尺寸除以2作为css的px尺寸

即想要表现一半尺寸效果,就是375/2 = 187.5px

(2)将rootValue设置为动态的值->参考解决方案

(3)配置 postcss.config.js:(这是第一种方式)

(4)配置 postcss.config.js:(这是第二种方式)

注意 :这里推荐使用第二种解决方案,根据不同情况设置不同的rootValue值。

  1. 使用Vant组件不影响。
  2. 自己的标签使用设计稿尺寸不用除以2,加快开发。
  3. 开发中常用的设计稿的尺寸通常是750px。

参考链接:https://blog.csdn.net/jyn15159/article/details/109325998

移动端Vant组件库REM适配的更多相关文章

  1. vue-cli3移动端自适应配置 Vant组件库

    module.exports = { presets: [ '@vue/app' ], plugins: [ ['import', { libraryName: 'vant', libraryDire ...

  2. 墨刀联合有赞Vant组件库,让你轻松设计出电商原型

    继上周新上线了简历模板之后,本周墨刀的原型模板库又欢喜地增添一名新成员! 有赞Vant组件库 (做电商的宝宝要捂嘴笑了)   Vant 组件库是有赞前端团队开源的一套基于Vue的UI组件库,目前版本收 ...

  3. HBuilderX使用Vant组件库

    HBuilderX使用Vant组件库 HBuilderX是一款由国人开发的开发工具,其官网称其为轻如编辑器.强如IDE的合体版本.但是官方的社区中关于Vant组件的安装大多都是针对微信小程序开发安装V ...

  4. 微信小程序引入Vant组件库

    前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.j ...

  5. 基于Svelte3.x桌面端UI组件库Svelte UI

    Svelte-UI,一套基于svelte.js开发的桌面pc端ui组件库 最近一直忙于写svelte-ui,一套svelte3开发的桌面端ui组件库.在设计及功能上借鉴了element-ui组件库.所 ...

  6. 移动端Vue组件库-Vant学习

    全局引入 import Vant from 'vant'; //嫌麻烦就全部一次导出,虽然包会稍微有点大 import 'vant/lib/index.css'; //注意导入全局的这个css,否则布 ...

  7. vue - 搭建 webapp 自适应项目-使用 vant 组件库 并 可自动调节大小

    1.创建个vue 项目,这里不详细写怎么创建,参考 vue - 指令创建 vue工程 - 岑惜 - 博客园 (cnblogs.com) https://www.cnblogs.com/c2g52013 ...

  8. Weex Ui 是一个基于 Weex 的富交互、轻量级、高性能的移动端 UI 组件库

    Github资源:https://github.com/alibaba/weex-ui 预览 你可以通过飞猪.淘宝.天猫.Weex Playground 或者浏览器扫码体验 安装 npm i weex ...

  9. vux-- Vue.js 移动端 UI 组件库

    1.使用 安装或更新: npm install vux --save npm install vux-loader --save 如果没有安装less: npm install less less-l ...

随机推荐

  1. 牛牛与后缀表达式_via牛客网

    题目 链接:https://ac.nowcoder.com/acm/contest/28537/B 来源:牛客网 时间限制:C/C++ 3秒,其他语言6秒 空间限制:C/C++ 262144K,其他语 ...

  2. 如何设计一个分布式 ID 发号器?

    大家好,我是树哥. 在复杂的分布式系统中,往往需要对大量的数据和消息进行唯一标识,例如:分库分表的 ID 主键.分布式追踪的请求 ID 等等.于是,设计「分布式 ID 发号器」就成为了一个非常常见的系 ...

  3. 大数据开发,Hadoop Spark太重?你试试esProc SPL

    摘要:由于目标和现实的错位,对很多用户来讲,Hadoop成了一个在技术.应用和成本上都很沉重的产品. 本文分享自华为云社区<Hadoop Spark太重,esProc SPL很轻>,作者: ...

  4. Java学习--方法

    Java学习 方法 方法 定义 Java方法是语句的集合,一起执行一个功能. 方法是解决一类问题的步骤的有序组合. 方法包含在类或对象中. 方法在程序中被创建,在其他地方被引用. 设计方法的时候,最好 ...

  5. luogu1419 寻找段落 (二分,单调队列)

    单调队列存坐标 #include <iostream> #include <cstdio> #include <cstring> #include <algo ...

  6. MySQL 连接超时:报错SQLSTATE[HY000] [2002] Connection timed out

    在网上找了一堆,结果全部是错的 后来,我明白了其实是设置问题. 当你的代码部署到服务器里的时候,你的mysql 的host 值 应该为 127.0.0.1 而不是 你的服务器ip 不然就会报错. 其实 ...

  7. 通过route , tracert , traceroute 查看本地路由配置及访问ip或域名时经过的路由信息

    转载请注明出处: 1.路由器和交换机的区别和过程 在windows 系统或linux 系统访问 外网ip 或域名时,都会通过层层的路由器,然后将请求转发到最终的目标服务器:因为互联网通过路由器实现公网 ...

  8. [CF1526F] Median Queries(交互 / 构造)

    题面 这是一道交互题. 有一个未知的长度为 N \tt N N 的排列 P \tt P P,已知 P 1 < P 2 \tt P_1 < P_2 P1​<P2​ . 每次询问格式为 ...

  9. vue2和vue3的区别?

    vue2和vue3的主要区别在于以下几点: 1.生命周期函数钩子不同 2.数据双向绑定原理不同 3.定义变量和方法不同 4.指令和插槽的使用不同 5.API类型不同 6.是否支持碎片 7.父子组件之间 ...

  10. 【设计模式】Java设计模式 - 动态代理

    [设计模式]Java设计模式 - 动态代理 不断学习才是王道 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 一个有梦有戏的人 @怒放吧德德 最近工作比较忙,没啥时间学习 目录 [设计模 ...