vue和react移动端适配方案

文章目录

• • vue移动端适配方案
  • react移动端适配方案
  • 图片的高清显示

vue移动端适配方案

vue使用rem适配

下载npm包

npm i postcss-px2rem --save -dev

第一种是新建postcss.config.js文件

module.exports = {"plugins": {"postcss-import": {},"postcss-url": {},"autoprefixer": {"browsers": ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 8']}, 'postcss-px2rem':{'remUnit':37.5}    //配置rem基准值，75是iphone6标准}
}

第二种是vue.config.js

css: {loaderOptions: {css: {},postcss: {plugins: [require('postcss-px2rem')({// 以设计稿750为例， 750 / 10 = 75remUnit: 37.5})]}}}

新建src/utils/rem.js

function adapter() {// 获取布局视口宽度，因为开启了理想视口，理想视口=设备横向独立像素const dpWidth = document.documentElement.clientWidth// 计算根字体大小const rootFontSize = dpWidth / 10console.log(dpWidth)// 设置根字体大小document.documentElement.style.fontSize = rootFontSize + 'px'
}
adapter()
window.onresize = adapter

在main.js中引入

import './utils/rem'

react移动端适配方案

react使用postcss-px2rem未生效，后来使用了vw百分比适配

下载npm包

npm install postcss-loader postcss-px-to-viewport --save-dev

暴露配置项

npm run eject

配置webpack.config.js

//找到postcss-loader,options下的插件配置项
['postcss-px-to-viewport',{unitToConvert: "px",// 要转化的单位viewportWidth: 750,// UI设计稿的宽度viewportHeight: 1334, // UI设计稿的高度unitPrecision: 3,// 转换后的精度，即小数点位数propList: ["*"],// 指定转换的css属性的单位，*代表全部css属性的单位都进行转换viewportUnit: "vw",// 指定需要转换成的视窗单位，默认vwfontViewportUnit: "vw",// 指定字体需要转换成的视窗单位，默认vwlandscapeUnit: 'vh',// 横屏时使用的单位landscapeWidth: 667,// 横屏时使用的视口宽度selectorBlackList: [],// 指定不转换为视窗单位的类名minPixelValue: 1,// 默认值1，小于或等于1px则不进行转换mediaQuery: false,// 是否在媒体查询的css代码中也进行转换，默认falsereplace: true,// 是否转换后直接更换属性值// landscape: false, // 是否处理横屏情况exclude: /(\/|\\)(node_modules)(\/|\\)/, // 设置忽略文件，用正则做目录名匹配}
],

如图

上述是plugins为三目运算符表达式形式，老版本可能会是函数返回数组形式。如下形式配置，配置项和上面都是一样的！

require('postcss-px-to-viewport')({viewportWidth: 750, viewportHeight: 1334, unitPrecision: 3,viewportUnit: "vw", selectorBlackList: [], minPixelValue: 1, mediaQuery: false 
}),

图片的高清显示

位图：由n个像素点组成，放大会失真。（常见：png、jpeg、jpg、gif）
矢量图：放大后不会失真。（常见：svg）
一般会对logo做高清显示，矢量图svg没有问题，使用位图要做媒体查询

//查询的是手机的dpr值，即手机物理像素与设备独立像素的比值
//使用媒体查询分别使用2x图和3x图，可以更好的使用像素点高清显示
@media screen and (-webkit-min-device-pixel-ratio:2) {.logo{content: url(../imgs/logo@2x.jpg)}}
@media screen and (-webkit-min-device-pixel-ratio:3) {.logo{content: url(../imgs/logo@3x.jpg)}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！