溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關如何解決基于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項目移動端適配的問題”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
