这篇文章给大家分享的是有关如何解决基于Vue/React项目移动端适配的问题的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。px2rem或postcss-px2rem在移动端中，为
这篇文章给大家分享的是有关如何解决基于Vue/React项目移动端适配的问题的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
px2rem或postcss-px2rem
在移动端中，为了设配不同的设备，通常使用rem来做适配。
rem是通过根元素进行适配的，网页中的根元素指的是<html>，我们通过设置<html>的字体大小就可以控制 rem 的大小（1rem = 1根元素字体大小）。
可见，只要我们根据不同屏幕（使用CSS媒体查询或js）设定好根元素<html>的字体大小，其他已经使用了rem单位的元素就会自适应显示相应的尺寸。
设计稿一般是按照一种特定设备型号（如iphone6）为基础且以px单位来定义样式，为了让设计稿能够通用在不同的设备型号中，则存在着从px到rem的繁琐计算转化过程，因此需要更加科学的方式来使用rem单位。
px2rem或postcss-px2rem的原理：将css中px编译为rem，配合js根据不同手机型号计算出dpr的值，修改<meta>的viewport值和置<html>的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 中设置<meta>标签：
<meta name="viewport" content="width=device-width,inital-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0,user-Scalable=no">然后在项目入口文件 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 中设置<meta>标签：
<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';同时，在项目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 了。
适用情况 & 不适用情况
以上实现转换适用于：
（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。
另外的情况不适用：
（1）在 vue 组件的<style></style>中通过@import “../../static/css/reset.css (可考虑上面（2）、（3）的形式引入)。
（2）外部样式：<link rel=”stylesheet” href=”static/css/reset.css”>。
（3）元素内部样式：。
感谢各位的阅读！关于“如何解决基于Vue/React项目移动端适配的问题”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
--结束END--
本文标题: 如何解决基于Vue/React项目移动端适配的问题
本文链接: https://www.lsjlt.com/news/75939.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0