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 = 75
            remUnit: 37.5
          })
        ]
      }
    }
  }

新建src/utils/rem.js

function adapter() {
    // 获取布局视口宽度，因为开启了理想视口，理想视口=设备横向独立像素
    const dpWidth = document.documentElement.clientWidth
    // 计算根字体大小
    const rootFontSize = dpWidth / 10
    console.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",// 指定需要转换成的视窗单位，默认vw
  	fontViewportUnit: "vw",// 指定字体需要转换成的视窗单位，默认vw
  	landscapeUnit: 'vh',// 横屏时使用的单位
  	landscapeWidth: 667,// 横屏时使用的视口宽度
  	selectorBlackList: [],// 指定不转换为视窗单位的类名
  	minPixelValue: 1,// 默认值1，小于或等于1px则不进行转换
  	mediaQuery: false,// 是否在媒体查询的css代码中也进行转换，默认false
  	replace: 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)
  }
}