基于Vue/React项目的移动端适配方案

来源:http://www.chinese-glasses.com 作者:Web前端 人气:83 发布时间:2020-03-24
摘要:最后,使用 yarn start 重启项目,则会发现项目中的postcss-px2rem配置完成。 另外的情况不适用:(1)在 vue组件的style/style中通过@import“../../static/css/reset.css(可考虑上面(2)、(3)的形式

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

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

yarn eject
const px2rem = require('postcss-px2rem')

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

项目中的使用

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 pluginfunction generateLoaders (loader, loaderOptions) {const loaders = [cssLoader, px2remLoader] // 添加px2remLoaderif (loader) {/* 省略代码块 */}/* 省略代码块 */}

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

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

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

文章同步发布:-share.com/detail/2784034817.html

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

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

下文给出了本人分别使用create-react-app搭建的react(create-react-app)项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案。

import 'lib-flexible';

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

本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率。

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

时间: 2019-11-06阅读: 128标签: 适配

适用情况 不适用情况

meta name="viewport" content="width=device-width,inital-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"

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

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

{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 dev 重启项目,会发现自己设置的px被转为rem 了。

import 'lib-flexible/flexible.js';

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

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

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

px2rem或postcss-px2rem

meta name="viewport" content="width=device-width,inital-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"

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

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

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

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

vue init webpack my-app

vue项目配置px2rem

recat项目配置postcss-px2rem

yarn add lib-flexibleyarn add px2rem-loader --dev
create-react-app my-app
cd my-app

在移动端中,为了设配不同的设备,通常使用rem来做适配。rem是通过根元素进行适配的,网页中的根元素指的是html,我们通过设置html的字体大小就可以控制 rem 的大小(1rem = 1根元素字体大小)。

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

本文由10bet发布于Web前端,转载请注明出处:基于Vue/React项目的移动端适配方案

关键词:

上一篇:rem js相关

下一篇:没有了

频道精选

最火资讯