vant适配移动端750设计稿

前言

按照vant官网给的rem适配，第一步安装 postcss-pxtorem：npm install postcss-pxtorem；

第二步安装lib-flexible：npm i -S amfe-flexible，记得在main.js文件引入 import 'amfe-flexible'；

第三步进行 postcss配置

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

按照上面配置的话，引入的vant组件样式是正常的，但是其他就显示不正常。因为vant设计稿是375px,而我们的设计稿是750px，如果把上面配置中的rootValue改为75，那么vant组件就会缩小一半，如下图所示：

显然，我们要去解决这个问题。

解决方法

将postcss配置改写

const path = require('path');
module.exports = ({file}) =>{const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 37.5 : 75.0;return {plugins: {autoprefixer: {browsers: ['Android >= 4.0', 'iOS >= 8'],},'postcss-pxtorem': {rootValue: designWidth,propList: ['*'],},},}};

vant适配移动端750设计稿相关推荐

ui设计移动端字体适配_JavaScript之独立使用lib-flexible.js适配移动端UI设计750px设计图...
本篇文章主要讲述JavaScript之独立使用lib-flexible.js适配移动端UI设计750px设计图,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. 最近在和设计沟通关 ...
Vue项目中750设计稿px自动转化成rem方法（小白一个，记录自己遇到的小白问题，大家勿怪）
一.首先下载 postcss-pxtorem 运行npm install postcss-pxtorem 完成下载之后,在package.json文件中添加这段代码 "postcss&quo ...
移动端根据设计稿宽度适配 px转换相对单位rem
为了计算方便,一般建议 1rem = 100px(设计稿px),要换算这样的比例需要设置html对应的fontSize,计算规则如下: fontSize = 屏幕宽度 / 设计稿宽度 * 基本宽度如 ...
移动端H5设计稿的问题与解决办法汇总
前沿就目前来看,移动端的H5是目前的一大趋势,毕竟就目前来说手机占据的极大的市场,人们每次都会在空闲时刻拿起自己的手机浏览网页,应用以及各种内容,但是针对于各种不同的手机长宽比以及分辨率是不同的,如 ...
移动端 H5 分屏页面适配问题--设计稿比例与设备宽高比例不同
移动端 H5 分屏页面适配问题单位问题肯定用rem, 为了方便计算,一般取 1rem=100px(设计稿px), 需要根据设计稿的宽度设置合适的fontSize, 具体可以看这篇文章 :移动端根据 ...
移动端UI设计750揭秘
为何大家都选用750作为移动端页面的宽度尺寸? 很多刚入门的ui小伙伴,不知道移动端为什么设计稿要做成750px宽, 今天我来阐述一下自己的想法, 以下是我个人见解,不喜勿喷.对于移动端页面, htm ...
iPhoneX设计稿适配Android,设计干货：iPhone X APP UI设计尺寸和适配【完整版】
被iPhone X刷了一天屏,到下午实在受不了各种假帖.标题写着"iPhone X 适配.指南.设计稿" 内容却是发布会回顾和手机介绍.索性自己去官网找素材写一篇只针对iPhone ...
sketch android设计,安卓手机预览sketch设计稿的偏方
在Android和iOS都使用同一套设计风格的情况下.我见过很大部分的视觉设计师,都喜欢并擅长从iOS端开始设计工作. Android和iOS的交互方式大大不同,设计风格也各有千秋.甚至在某一个官方设 ...
sketch设计android,安卓手机预览sketch设计稿的偏方
在Android和iOS都使用同一套设计风格的情况下.我见过很大部分的视觉设计师,都喜欢并擅长从iOS端开始设计工作. Android和iOS的交互方式大大不同,设计风格也各有千秋.甚至在某一个官方设 ...
html还原ui,前端高度还原设计稿（字体篇）
前言: 以前前端都是拿到psd设计图,需要自己用ps切图,需要自己在psd上面一个个去量设计的大小和间距,而现在一般都是要求设计师把设计稿直接上传到蓝湖上面,通过蓝湖的标注来写出前端代码!下面我就前端 ...

vant适配移动端750设计稿

前言

解决方法

vant适配移动端750设计稿相关推荐

最新文章

热门文章