基于 react 的移动端适配方案
2020-03-11 13:14
621 查看
就不喜欢废话,直接上干货!!
一、创建项目
create-react-app react-vw-layout cd react-vw-layout npm start
npm start 会打开 http://localhost:3000/ ,react欢迎页面,项目创建成功
二、打开配置选项
由于react默认隐藏webpack配置,需要手动显示( npm run eject 暴露配置项)
npm run eject //Are you sure you want to eject? This action is permanent. (y/N) y
运行完eject之后项目结构如图:
三、配置插件
安装 postCss 插件
npm i --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-preset-env postcss-viewport-units cssnano
安装的 postCss 插件有postcss-aspect-ratio-mini、postcss-px-to-viewport、postcss-write-svg、postcss-preset-env、postcss-viewport-units以及cssnano
也可以像下面这样装完一个再装另一个
npm i --save postcss-aspect-ratio-mini
npm i --save postcss-px-to-viewport
npm i --save postcss-write-svg
npm i --save postcss-preset-env
npm i --save postcss-viewport-units
npm i --save cssnano
安装成功之后,在config/webpack.config.js文件中进行如下修改
1、引入postCss插件
// 移动端适配添加 - 插入 const postcssAspectRatioMini = require('postcss-aspect-ratio-mini'); const postcssPxToViewport = require('postcss-px-to-viewport'); const postcssWriteSvg = require('postcss-write-svg'); const postcssCssnext = require('postcss-preset-env');//这个插件已经更新 postcss-preset-env 所以请使用 "postcss-preset-env" const postcssViewportUnits = require('postcss-viewport-units'); const cssnano = require('cssnano');
2、加入postCss配置
加入配置代码位置:
{ // Options for PostCSS as we reference these options twice // Adds vendor prefixing based on your specified browser support in // package.json loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebook/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), require('postcss-preset-env')({ autoprefixer: { flexbox: 'no-2009', }, stage: 3, }), //加入位置 //加入位置 //加入位置 postcssNormalize(), ], sourceMap: isEnvProduction && shouldUseSourceMap, }, },
需要加入的代码:
// -----插入适配移动端配置项-----> postcssAspectRatioMini({}), postcssPxToViewport({ viewportWidth: 750, // (Number) The width of the viewport. viewportHeight: 1334, // (Number) The height of the viewport. unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to. viewportUnit: 'vw', // (String) Expected units. selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px. minPixelValue: 1, // (Number) Set the minimum pixel value to replace. mediaQuery: false // (Boolean) Allow px to be converted in media queries. }), postcssWriteSvg({ utf8: false }), postcssCssnext({}), postcssViewportUnits({}), cssnano({ /* 旧的 --坑点 preset: "advanced", autoprefixer: false, "postcss-zindex": false */ //新配置继续使用高级配置,按照这个配置 "cssnano-preset-advanced": { zindex: false, autoprefixer: false }, }),
四、测试验证
修改App.js
import React, { Component } from 'react'; import './App.css'; class App extends Component { render() { return ( <div className="App"> hello vw-layout </div> ); } } export default App;
修改App.css
.App { width: 750px; height: 200px; background: #7af2ec; color: #e20ea3; line-height: 200px; text-align: center; }
npm start 启动项目,打开控制台,这个时候已经生效了
配置好生产环境之后验证,npm run build,这个时候,生产打包已经生效了。
五、加入viewport-units-buggyfill配置
首先在中引入阿里cdn
<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
在body中,加入如下js代码:
<script> window.onload = function () { window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks }); // 验证输出 const winDPI = window.devicePixelRatio const uAgent = window.navigator.userAgent const screenHeight = window.screen.height const screenWidth = window.screen.width const winWidth = window.innerWidth const winHeight = window.innerHeight console.log(winDPI, "设备 DPI") console.log(uAgent, "客户端") console.log(screenWidth, "屏幕宽度") console.log(winHeight, "屏幕高度") console.log(winWidth, "Windows Width") console.log(winHeight, "Windows Height") } </script>
如果遇到 img 无法显示,则添加全局 css
img { content: normal !important; }
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 详解基于Vue/React项目的移动端适配方案
- 基于rem的移动端响应式适配方案(详解)
- 基于REM的移动端响应式适配方案
- 基于React的适配PC端和移动端的轻量音乐播放器
- 滴滴开源基于 React 的移动端开发组件库-Pile.js
- 移动端适配方案(上)
- 移动端屏幕尺寸适配方案
- webapp移动端适配方案之“手淘框架flexible”
- React-Native跨平台多屏幕尺寸适配方案一览
- 国内外移动端web适配屏幕方案
- 一种简单的移动端屏幕适配方案
- 移动端高清、多屏适配方案
- 移动端适配方案
- 最火移动端跨平台方案盘点:React Native、weex、Flutter
- 08-移动端开发教程-移动端适配方案
- 移动端适配方案进阶
- 手淘的移动端适配方案flexible
- 基于React Native + redux 开发的客户端(适配IOS和Android),可查看保存妹纸,收藏分享文章等
- lib-flexible移动端适配方案
- 移动端适配——rem方案