作者:前端小黑
鏈接:https://juejin.im/post/5d5cd14951882546282363b6
前言
本文的目標是通過下文介紹的適配方案,使用vue或react開發移動端及H5的時候,不需要再關心移動設備的大小,只需要按照固定設計稿的px值佈局,提升開發效率。
下文給出了本人分別使用create-react-app搭建的react(create-react-app)項目和使用vue-cli 2.x 搭建的vue項目中的 親測可用 配置方案。
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)元素內部樣式:
style="height: 417px; width: 550px;"
。
❤️ 看完三件事
如果你覺得這篇內容對你挺有啓發,我想邀請你幫我三個小忙:
點個「在看」,讓更多的人也能看到這篇內容(喜歡不點在看,都是耍流氓 -_-)
關注我的博客 https://github.com/SHERlocked93/blog,讓我們成爲長期關係
關注公衆號「前端下午茶」,持續爲你推送精選好文,也可以加我爲好友,隨時聊騷。
在看點這裏