移动端Vant组件库REM适配
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值。
- 使用Vant组件不影响。
- 自己的标签使用设计稿尺寸不用除以2,加快开发。
- 开发中常用的设计稿的尺寸通常是750px。
参考链接:https://blog.csdn.net/jyn15159/article/details/109325998
移动端Vant组件库REM适配的更多相关文章
- vue-cli3移动端自适应配置 Vant组件库
module.exports = { presets: [ '@vue/app' ], plugins: [ ['import', { libraryName: 'vant', libraryDire ...
- 墨刀联合有赞Vant组件库,让你轻松设计出电商原型
继上周新上线了简历模板之后,本周墨刀的原型模板库又欢喜地增添一名新成员! 有赞Vant组件库 (做电商的宝宝要捂嘴笑了) Vant 组件库是有赞前端团队开源的一套基于Vue的UI组件库,目前版本收 ...
- HBuilderX使用Vant组件库
HBuilderX使用Vant组件库 HBuilderX是一款由国人开发的开发工具,其官网称其为轻如编辑器.强如IDE的合体版本.但是官方的社区中关于Vant组件的安装大多都是针对微信小程序开发安装V ...
- 微信小程序引入Vant组件库
前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.j ...
- 基于Svelte3.x桌面端UI组件库Svelte UI
Svelte-UI,一套基于svelte.js开发的桌面pc端ui组件库 最近一直忙于写svelte-ui,一套svelte3开发的桌面端ui组件库.在设计及功能上借鉴了element-ui组件库.所 ...
- 移动端Vue组件库-Vant学习
全局引入 import Vant from 'vant'; //嫌麻烦就全部一次导出,虽然包会稍微有点大 import 'vant/lib/index.css'; //注意导入全局的这个css,否则布 ...
- vue - 搭建 webapp 自适应项目-使用 vant 组件库 并 可自动调节大小
1.创建个vue 项目,这里不详细写怎么创建,参考 vue - 指令创建 vue工程 - 岑惜 - 博客园 (cnblogs.com) https://www.cnblogs.com/c2g52013 ...
- Weex Ui 是一个基于 Weex 的富交互、轻量级、高性能的移动端 UI 组件库
Github资源:https://github.com/alibaba/weex-ui 预览 你可以通过飞猪.淘宝.天猫.Weex Playground 或者浏览器扫码体验 安装 npm i weex ...
- vux-- Vue.js 移动端 UI 组件库
1.使用 安装或更新: npm install vux --save npm install vux-loader --save 如果没有安装less: npm install less less-l ...
随机推荐
- logstash在windows系统下的安装与使用
前言: Logstash 是开源的服务器端数据处理管道,能够同时从多个来源采集数据,转换数据,然后将数据发送到 Elasticsearch. ES官网:https://www.elastic.co/p ...
- AtCoder Beginner Contest 260 G // imos(累积和算法)
题目传送门:G - Scalene Triangle Area (atcoder.jp) 题意: 给定大小为N*N的OX矩阵,若矩阵的(s,t)处为O,其覆盖范围为:满足以下条件的所有位置(i,j) ...
- IM系统-消息流化一些常见问题
原创不易,求分享.求一键三连 之前说过IM系统的一些优化,但是在网络上传输数据对于数据的流化和反流化也是处理异常情况的重点环节,不处理好可能会出现一些消息发送成功,但是解析失败的情况,本文就带大家来一 ...
- linux学习之selinux安全处理
linux在默认情况下会开启selinux,如果软件开放的端口不是selinux默认的协议端口会导致防火墙端口开放后还是无法访问.以下是解决办法. [root@localhost ~]# semana ...
- scrollTop实例
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- node.js操作数据库
var sys = require('sys'); var Client = require('mysql').Client; var client = new Client(); client.us ...
- 利用本地HTTPS模拟环境为FastAPI框架集成FaceBook社交三方登录
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_174 提起社交,就不得不说马克·扎克伯格(Mark Zuckerberg)一手创办的社交网络(FaceBook).进入2020年, ...
- powershell和cmd对比
前言 计算机啊这东西,本质上是硬件和软件的综合体.如果只有硬件没有软件的话,这也是台辣鸡而已.而计算机软件中最靠近硬件的一层,就是操作系统层. 操作系统有很多种,比如Unix/Linux/Mac OS ...
- Apache Dolphinscheduler3.0.0-beta-1 版本发布,新增FlinkSQL、Zeppelin任务类型
导读:近日,Apache Dolphin Scheduler 迎来了 3.0.0-beta-1 版本的正式发布.新版本主要针对 3.0.0-alpha 进行了代码和文档的修复,并引入了部分的功能,如支 ...
- BZOJ3572/Luogu3233 [Hnoi2014]世界树 (虚树) (Unfinished)
我太弱了,这叼题先搁着把,来日方长,自有切时... ...或许吧 #include <iostream> #include <cstdio> #include <cstr ...