vue2+vant适配750设计稿

只限自己解决项目中遇到的问题

1.安装postcss-pxtorem(版本>=5.0.0)

npm install postcss postcss-pxtorem --save-dev

2.根文件夹创建postcss.config.js文件,同时适配设计稿

module.exports = {plugins: {// postcss-pxtorem 插件的版本需要 >= 5.0.0'postcss-pxtorem': {rootValue({ file }) {return file.indexOf('vant') !== -1 ? 37.5 : 75;},propList: ['*'],},},
};

3.安装lib-flexible

npm i amfe-flexible

4.main.js导入该模块

import 'amfe-flexible'

4步配置就完成了vant组件在750设计稿中的缩小问题啦!

vue2+vant适配750设计稿相关推荐

Vue项目中750设计稿px自动转化成rem方法（小白一个，记录自己遇到的小白问题，大家勿怪）
一.首先下载 postcss-pxtorem 运行npm install postcss-pxtorem 完成下载之后,在package.json文件中添加这段代码 "postcss&quo ...
ui设计移动端字体适配_UI设计稿中常见的单位及移动端适配
一.pt 在我们的设计稿中,经常看到以pt单位来标注的稿子,那么pt究竟是个什么单位?其实pt是用于印刷行业用来表示字体大小的单位,也叫做磅,用过word设置字体的应该不会陌生,它是一个绝对长度,为1 ...
移动端 H5 分屏页面适配问题--设计稿比例与设备宽高比例不同
移动端 H5 分屏页面适配问题单位问题肯定用rem, 为了方便计算,一般取 1rem=100px(设计稿px), 需要根据设计稿的宽度设置合适的fontSize, 具体可以看这篇文章 :移动端根据 ...
React Native不同设备分辨率适配和设计稿尺寸单位px的适配
React Native中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢? 官方提供了PixelRat ...
移动端根据设计稿宽度适配 px转换相对单位rem
为了计算方便,一般建议 1rem = 100px(设计稿px),要换算这样的比例需要设置html对应的fontSize,计算规则如下: fontSize = 屏幕宽度 / 设计稿宽度 * 基本宽度如 ...
前端适配不同型号手机分辨率，100%还原UI设计稿的方案实践
现在手机屏大小不一,而且屏幕硬件性能也各不相同,一般的UI设计都是基于特定机型画设计搞件的,常见的是基于iPhone6的分辨率设计2倍图,以iPhone6为例,屏幕物理像素宽度是750,网页宽度为37 ...
移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题
移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题参考文章: (1)移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题 (2)https://ww ...
Vue笔记（二）如何做移动端适配让你只用关心设计稿
一. 移动端基础知识在移动端开发时,我们经常发现出现布局后有不兼容的问题,如何在不同设备上进行适配呢,希望康完这边,你能从原理到应用彻底熟悉移动端适配. 1.1 手机屏幕现状移动端设备屏幕尺寸非常 ...
uni-app 对照设计稿还原不同屏幕像素适配（iPhone X）
最近项目中需要高频度使用单位像素换算,以适配不同屏幕大小的需求,这里我以蓝湖为例,下面我给出换算步骤: 1.把蓝湖设计稿选到 ios 端,这时候页面单位变成了pt,因为我们iPhone X的屏幕和这个 ...
iPhoneX设计稿适配Android,设计干货：iPhone X APP UI设计尺寸和适配【完整版】
被iPhone X刷了一天屏,到下午实在受不了各种假帖.标题写着"iPhone X 适配.指南.设计稿" 内容却是发布会回顾和手机介绍.索性自己去官网找素材写一篇只针对iPhone ...

vue2+vant适配750设计稿

vue2+vant适配750设计稿相关推荐

最新文章

热门文章