前言:
此刻你们对“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兼容苹果