龙空技术网

vue项目中移动端适配,postcss-pxtorem

雾恋 150

前言:

此刻你们对“css兼容苹果”可能比较注重,看官们都需要学习一些“css兼容苹果”的相关资讯。那么小编在网络上汇集了一些关于“css兼容苹果””的相关资讯,希望朋友们能喜欢,大家快快来了解一下吧!

目录:我们在开发移动端项目的时候会遇到不同的机型,比如:iPhone5、iPhone6 / 7等等;而我们需要兼容不同机型的屏幕宽度和大小;以至于在不同的手机上都能看到一样的效果;那么我们就需要做适配兼容处理;今天给大家带来的兼容适配插件是:postcss-pxtorem 和 amfe-flexible的配合使用;

amfe-flexible

第一步:安装

npm i -S amfe-flexible  // 设置 rem 基准值

第二步:在main.js 文件中直接引用即可

import 'amfe-flexible'

当我们设置好以后;可以看到html标签中会出现 font-size

postcss-pxtorem

第一步:安装

npm install postcss-pxtorem --save-dev // 将单位转化为 rem 值

第二步:在文件的根目录下创建 .postcssrc.js 文件

第三步:将一下代码复制在文件中

module.exports = {  plugins: {    autoprefixer: {      browsers: ['Android >= 4.0', 'iOS >= 8'],    },    'postcss-pxtorem': {      rootValue: 37.5, // 换算基数,如:你的设计图是750的;那么这儿就可以写成75,如果是375的,那么这儿就写37.5即可      propList: ['*'],    },  },};

如果在开发的过程中有一些不想被转换的ui库或者说组件的时候就可以在 'postcss-pxtorem' 中添加一下代码 selectorBlackList:表示不进行转换组件,如不想转换为vant组件的ui库;就直接在数组中添加即可;但是这种的话会出现一个问题;那就是vant的所有组件还是按照px的,这样就是造成vant组件这一块不能自适应;所以,这种不推荐

'postcss-pxtorem': {      rootValue: 37.5, // 换算基数,如:你的设计图是750的;那么这儿就可以写成75,如果是375的,那么这儿就写37.5即可      selectorBlackList: ['van'], // 忽略ui组件的       propList: ['*'],  },

一下推荐的配置是一下这种;由于vant是375的标准;所以直接给他配置成37.5即可,而他会根据配置好的进行转换为rem基准值;这样也就不会出现问题了哈;重启一下项目即可看到效果了;赶紧去试试吧!

module.exports = {  plugins: {    autoprefixer: {      browsers: ['Android >= 4.0', 'iOS >= 8']    },    'postcss-pxtorem': {    // 首先是设计图是 750 的哈      rootValue ({ file }) {  //  这儿是用来判定是都是自己的元素代码 如果是巨剑的就用37.5 如果不是就用 75        return file.indexOf('van') !== -1 ? 37.5 : 75      },      propList: ['*'],      exclude: 'github-markdown'    }  }}

注意:如果在启动项目的时候出现这个错误的话,那就是配置过高了,这个时候需要对配置做一些调整;如一下代码

把这串代码删掉

browsers: ['Android >= 4.0', 'iOS >= 8']

换成这串代码;然后重启一下;就不会保存了

overrideBrowserslist: [        "Android 4.1",        "iOS 7.1",        "Chrome > 31",        "ff > 31",        "ie >= 8"]

如果有什么不对的地方;欢迎大家补充;相互学习、共勉

标签: #css兼容苹果