vue-vant项目字体以及组件字体适配

1. 页面中字体适配的方法：
新建一个rem.js文件：

const baseSize = 32
function setRem () {const scale = document.documentElement.clientWidth / 750document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
setRem()
window.onreset = function () {setRem()
}

里面32是根据自己而定的，上面的是以iphone6（750）为基准设置的字体，本例是基准为16px = 1rem

2. vant组件字体适配方法：
首先安装postcss-pxtorem ；
然后在 .postcssrc.js文件里面添加如下代码：

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

里面16是根据自己而定的，本例是基准为16px = 1rem 计算公式为a/16 (px) = b/1 (rem) 后期根据px设计图，换算为rem单位。

vue-vant项目字体以及组件字体适配相关推荐

在 Nuxt.js 和 Vue.js 项目中引入第三方字体或艺术字
一.需求分析在我们写前端页面的时候,大部分时候是不需要用到第三方字体的,但如果是面向C端的页面,比如宣传页,就有可能会引入第三方字体,主要还是看UI设计师咋想了,此时我们可以通过让UI将特殊字体切成 ...
vue+elementui项目中引入第三方字体文件的方法示例
# 问题描述: vue中项目,发现相同页面在不同电脑上,字体显示效果不一致,例如:代码中设置了楷体,在某些电脑上显示不是楷体效果. # 解决方案: 1.先下载字体文件所需的.ttf文件(这不很重要,你 ...
vue cli3+项目使用postcss-px2rem或者postcss-plugin-px2rem适配
1. 使用postcss-px2rem或者postcss-plugin-px2rem讲vue项目的px全部转换未rem适配. 2. 下载: npm install --save postcss-px2 ...
Vue CLI 脚手架详解：快速构建 Vue.js 项目的利器
目录一.安装和创建项目二.项目结构三.开发和构建四.插件和配置 Vue CLI 是 Vue.js 官方提供的脚手架工具,它可以帮助开发者快速搭建 Vue.js 项目的基础结构,并提供了丰富的功 ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
vue项目登录页-实现字体动画案例
vue项目登录页-实现字体动画案例实现思路: 1,让每个字都包含在span标签中,span标签的display:inner-block 2,页面刚生成时(动画之前)设置margin宽度为80px,o ...
vant 半圆仪表盘_超全的 Vue 开源项目合集，签收一下
原标题:超全的 Vue 开源项目合集,签收一下写在前面包括一些ui库和比较完整的小项目.ui库会对主要的单选框,多选框,级联选择器,滑块,日期/时间选择器,进度条,分页,弹框,通知,导航菜单,步骤 ...
vue+vant 移动端H5 商城项目_03
文章目录一.·首页搜索功能 1. 搜索页面 2. 历史记录和热门搜索组件 3. 搜索框提示列表组件 4. 综合-价格-分类 5. 搜索出的产品展示 6. 异常修复 7. 路由拦截/路由守卫二.详情 ...
vant步进器传值_有赞开源的Vue 2.0 的 Mobile 组件库 Vant
有赞开源的Vue 2.0 的 Mobile 组件库 Vant 是一个轻量.可靠的移动端 Vue 组件库.包括了基础组件.Button 按钮.Cell 单元格.Icon 图标.Image 图片.Layo ...

vue-vant项目字体以及组件字体适配

vue-vant项目字体以及组件字体适配相关推荐

最新文章

热门文章