纵有疾风起
人生不言弃

移动端添加适配方案

Flex 布局 + rem + flexible+sass

React

  1. 暴露webpack配置,即 react-scripts 包
npm run eject

⚠️ 在运行该命令的时候,要先将已经修改的文件提交到本地仓库中过,否则会报错!

  1. 安装项目项目需要的包 lib-flexiblepostcss-px2rempostcss-loader
npm install postcss-px2rem lib-flexible --savenpm install postcss-loader --dev
  1. 在项目的 public/index.html 入口文件添加
<meta name="viewport" content="width=device-width,inital-scale=1.0,    maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  1. 然后在项目入口文件 index.js 中引入 lib-flexible
import "lib-flexible" ;

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

const px2rem = require("postcss-px2rem");
移动端添加适配方案插图
i配置文件.png
  • 在 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: 75}), // 添加的内容            /* 省略代码... */          ],          sourceMap: isEnvProduction && shouldUseSourceMap,        },      },
移动端添加适配方案插图(1)
i配置.png

重新启动项目,发现里面的px单位都变成了rem

注意:使用 px2rem-loader 后再使用px上有些不同:
直接写 px ,编译后会直接转化成rem —— 除开下面两种情况,其他长度用这个
在 px 后面添加 /no/ ,不会转化 px,会原样输出。 —— 一般border需用这个
在 px 后面添加 /px/ ,会根据 dpr 的不同,生成三套代码。—— 一般字体需用这个,默认是@2x图 style

.App {  .header {    border: 10px solid #ddd; /*no*/    color:#f00;    font-size: 100px; /*px*/    }}

Vue

vue项目配置px2rem

  • 首先,我们使用 vue 的脚手架 vue-cli 初始化一个 webpack 项目(前提是已经安装过 vue-cli,具体不再阐述),一些选项根据自己项目需要选择。
vue init webpack my-app
  • 命令执行之后,会在当前目录生成一个以“my-app”命名的项目文件夹。进入项目目录:
cd my-app
  • 使用yarn 安装项目所需依赖后,安装 lib-flexiblepx2rem-loader
yarn add lib-flexibleyarn add px2rem-loader --dev
  • 在入口页面 index.html 中设置“标签:
<meta name="viewport" content="width=device-width,inital-scale=1.0,    maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  • 然后在项目入口文件 main.js 中引入 lib-flexible
import "lib-flexible/flexible.js" ;
  • 用 vue-cli3 创建的 vue 项目配置 px2rem-loader 如下:
    找到文件 node_modules/@vue/cli-service/lib/config/css.js,在css loader之前添加规则,如下所示:
    移动端添加适配方案插图(2)
    i图示.png
rule    .use('px2rem-loader')    .loader('px2rem-loader')    .options({emUnit: 75})
  • 最后,使用 yarn dev 重启项目,会发现自己设置的px被转为rem 了。
    移动端添加适配方案插图(3)
    图示2.png

适用情况 & 不适用情况

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

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

文章转载于:https://www.jianshu.com/p/88f282a840a6

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 移动端添加适配方案

分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活