如何解决基于Vue/React项目移动端适配的问题

这篇文章给大家分享的是有关如何解决基于Vue/React项目移动端适配的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

成安ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:028-86922220(备注:SSL证书合作)期待与您的合作!

px2rem或postcss-px2rem

  • 在移动端中,为了设配不同的设备,通常使用rem来做适配。

  • rem是通过根元素进行适配的,网页中的根元素指的是,我们通过设置的字体大小就可以控制 rem 的大小(1rem = 1根元素字体大小)。

  • 可见,只要我们根据不同屏幕(使用css媒体查询或js)设定好根元素的字体大小,其他已经使用了rem单位的元素就会自适应显示相应的尺寸。

  • 设计稿一般是按照一种特定设备型号(如iphone6)为基础且以px单位来定义样式,为了让设计稿能够通用在不同的设备型号中,则存在着从px到rem的繁琐计算转化过程,因此需要更加科学的方式来使用rem单位。

  • px2rem或postcss-px2rem的原理:将css中px编译为rem,配合js根据不同手机型号计算出dpr的值,修改的viewport值和置的font-size。

项目中的使用

recat项目配置postcss-px2rem

首先,我们使用 react 的脚手架 create-react-app 初始化一个 webpack 项目(前提是已经安装过create-react-app,具体不再阐述)。

create-react-app my-app

暴露webpack配置,即 react-scripts 包:

yarn eject

使用yarn 安装项目所需依赖后,安装 lib-flexible 、 postcss-px2rem 和 postcss-loader:

yarn add postcss-px2rem lib-flexible 
yarn add postcss-loader --dev

在入口页面 index.html 中设置标签:

然后在项目入口文件 index.js 中引入 lib-flexible:

import 'lib-flexible';

接着,在项目config目录下的 webpack.config.js 中引入 postcss-px2rem :

const px2rem = require('postcss-px2rem')

同时,在 webpack.config.js 的 postcss-loader loader里面添加 :

{
    loader: require.resolve('postcss-loader'),
    options: {
     /* 省略代码... */
     plugins: () => [
      require('postcss-flexbugs-fixes'),
      require('postcss-preset-env')({
       autoprefixer: {
        flexbox: 'no-2009',
       },
       stage: 3,
      }),
      px2rem({remUnit: 37.5}), // 添加的内容
      /* 省略代码... */
     ],
     sourceMap: isEnvProduction && shouldUseSourceMap,
    },
   },

最后,使用 yarn start 重启项目,则会发现项目中的postcss-px2rem配置完成。

vue项目配置px2rem

首先,我们使用 vue 的脚手架 vue-cli 初始化一个 webpack 项目(前提是已经安装过vue-cli,具体不再阐述),一些选项根据自己项目需要选择。

vue init webpack my-app

命令执行之后,会在当前目录生成一个以“my-app”命名的项目文件夹。进入项目目录:

cd my-app

使用yarn 安装项目所需依赖后,安装 lib-flexible 和  px2rem-loader:

yarn add lib-flexible
yarn add px2rem-loader --dev

在入口页面 index.html 中设置标签:

然后在项目入口文件 main.js 中引入 lib-flexible:

import 'lib-flexible/flexible.js';

同时,在项目build目录下的 utils.js 中,将px2rem-loader 添加到cssLoaders中。通过搜索找到 generateLoaders 方法,在这里添加:

exports.cssLoaders = function (options) {
 /* 省略代码块 */

 const cssLoader = {
  /* 省略代码块 */
 }

 /* 添加的代码块 */
 const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
   remUnit: 37.5 // 基准大小 baseSize,设计稿宽度/10
  }
 }
 /* 添加的代码块 */
 
 // generate loader string to be used with extract text plugin
 function generateLoaders (loader, loaderOptions) {
  const loaders = [cssLoader, px2remLoader] // 添加px2remLoader
  if (loader) {
   /* 省略代码块 */
  }

  /* 省略代码块 */
}

最后,使用 yarn dev 重启项目,会发现自己设置的px被转为rem 了。

如何解决基于Vue/React项目移动端适配的问题

适用情况 & 不适用情况

以上实现转换适用于:
(1)vue 组件中编写的下的css。
(2)从 react 项目的 index.js 或者 vue 项目的 main.js 中通过import ‘../../static/css/reset.css'引入css。
(3)在 vue 组件的中引入css。

另外的情况不适用:
(1)在 vue 组件的中通过@import “../../static/css/reset.css (可考虑上面(2)、(3)的形式引入)。
(2)外部样式:
(3)元素内部样式:。

感谢各位的阅读!关于“如何解决基于Vue/React项目移动端适配的问题”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


文章标题:如何解决基于Vue/React项目移动端适配的问题
URL网址:http://myzitong.com/article/ipsise.html