詳解基于Vue/React項目的移動端適配方案
前言
本文的目標(biāo)是通過下文介紹的適配方案,使用vue或react開發(fā)移動端及H5的時候,不需要再關(guān)心移動設(shè)備的大小,只需要按照固定設(shè)計稿的px值布局,提升開發(fā)效率。
下文給出了本人分別使用create-react-app搭建的react(create-react-app)項目和使用vue-cli 2.x 搭建的vue項目中的 親測可用 配置方案。
px2rem或postcss-px2rem
- 在移動端中,為了設(shè)配不同的設(shè)備,通常使用rem來做適配。
- rem是通過根元素進行適配的,網(wǎng)頁中的根元素指的是<html>,我們通過設(shè)置<html>的字體大小就可以控制 rem 的大小(1rem = 1根元素字體大?。?。
- 可見,只要我們根據(jù)不同屏幕(使用css媒體查詢或js)設(shè)定好根元素<html>的字體大小,其他已經(jīng)使用了rem單位的元素就會自適應(yīng)顯示相應(yīng)的尺寸。
- 設(shè)計稿一般是按照一種特定設(shè)備型號(如iphone6)為基礎(chǔ)且以px單位來定義樣式,為了讓設(shè)計稿能夠通用在不同的設(shè)備型號中,則存在著從px到rem的繁瑣計算轉(zhuǎn)化過程,因此需要更加科學(xué)的方式來使用rem單位。
- px2rem或postcss-px2rem的原理:將css中px編譯為rem,配合js根據(jù)不同手機型號計算出dpr的值,修改<meta>的viewport值和置<html>的font-size。
項目中的使用
recat項目配置postcss-px2rem
首先,我們使用 react 的腳手架 create-react-app 初始化一個 webpack 項目(前提是已經(jīng)安裝過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 中設(shè)置<meta>標(biāo)簽:
<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}), // 添加的內(nèi)容
/* 省略代碼... */
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
最后,使用 yarn start 重啟項目,則會發(fā)現(xiàn)項目中的postcss-px2rem配置完成。
vue項目配置px2rem
首先,我們使用 vue 的腳手架 vue-cli 初始化一個 webpack 項目(前提是已經(jīng)安裝過vue-cli,具體不再闡述),一些選項根據(jù)自己項目需要選擇。
vue init webpack my-app
命令執(zhí)行之后,會在當(dāng)前目錄生成一個以“my-app”命名的項目文件夾。進入項目目錄:
cd my-app
使用yarn 安裝項目所需依賴后,安裝 lib-flexible 和 px2rem-loader:
yarn add lib-flexible yarn add px2rem-loader --dev
在入口頁面 index.html 中設(shè)置<meta>標(biāo)簽:
<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 // 基準(zhǔn)大小 baseSize,設(shè)計稿寬度/10
}
}
/* 添加的代碼塊 */
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader, px2remLoader] // 添加px2remLoader
if (loader) {
/* 省略代碼塊 */
}
/* 省略代碼塊 */
}
最后,使用 yarn dev 重啟項目,會發(fā)現(xiàn)自己設(shè)置的px被轉(zhuǎn)為rem 了。

適用情況 & 不適用情況
以上實現(xiàn)轉(zhuǎn)換適用于:
(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)元素內(nèi)部樣式:style="height: 417px; width: 550px;"。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue項目中常見的三種文件類型在線預(yù)覽實現(xiàn)(pdf/word/excel表格)
最近在項目中要做一個pdf在線預(yù)覽的功能,索性給大家整理個全面的,這篇文章主要給大家介紹了關(guān)于vue項目中常見的三種文件類型在線預(yù)覽實現(xiàn)的相關(guān)資料,文件類型分別是pdf/word文件/excel表格,需要的朋友可以參考下2022-05-05
elementui的el-popover修改樣式不生效的解決
在使用element-ui的時候,有一個常用的組件,那就是el-popover,本文就介紹一下elementui的el-popover修改樣式不生效的解決方法,感興趣的可以了解一下2021-06-06
vue3-print-nb實現(xiàn)頁面打印(含分頁打印)示例代碼
大多數(shù)后臺系統(tǒng)中都存在打印的需求,在有打印需求時,對前端來說當(dāng)然是直接打印頁面更容易,下面這篇文章主要給大家介紹了關(guān)于vue3-print-nb實現(xiàn)頁面打印(含分頁打印)的相關(guān)資料,需要的朋友可以參考下2024-01-01
vue?element-plus中el-input修改邊框border的方法
element樣式還是蠻好的,只是有時候我們需要做一些調(diào)整,比如el-input的邊框,下面這篇文章主要給大家介紹了關(guān)于vue?element-plus中el-input修改邊框border的相關(guān)資料,需要的朋友可以參考下2022-09-09
詳解el Cascader懶加載數(shù)據(jù)回顯示例
這篇文章主要為大家介紹了詳解el Cascader懶加載數(shù)據(jù)回顯示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11

