移動端適配方案介紹
- 在移動端中，為了設(shè)配不同的設(shè)備，通常使用rem來做適配。
- rem是通過根元素進(jìn)行適配的，網(wǎng)頁中的根元素指的是<html>，我們通過設(shè)置<html>的字體大小就可以控制 rem 的大?。?rem = 1根元素字體大小）
- 可見，只要我們根據(jù)不同屏幕（使用css媒體查詢或js）設(shè)定好根元素<html>的字體大小，其他已經(jīng)使用了rem單位的元素就會自適應(yīng)顯示相應(yīng)的尺寸。
- 設(shè)計稿一般是按照一種特定設(shè)備型號（如iphone6 375px）為基礎(chǔ)且以px單位來定義樣式，為了讓設(shè)計稿能夠通用在不同的設(shè)備型號中，則存在著從px到rem的繁瑣計算轉(zhuǎn)化過程，因此需要更加科學(xué)的方式來使用rem單位。
- px2rem或postcss-px2rem的原理：將css中px編譯為rem，配合js根據(jù)不同手機型號計算出dpr的值，修改<meta>的viewport值和置<html>的font-size。
配置步驟
1. 安裝依賴包
yarn add lib-flexible postcss-px2rem
2. 配置
- 2.1 導(dǎo)出 webpack 配置文件 :
- 命令 :
yarn eject - 需要添加到本地git倉庫 :
git add . 和 git commit -m xxx - 查看配置文件 :
config/webpack.config.js
- 命令 :
- 2.2 修改配置文件
- 引入模塊 :
const px2rem = require('postcss-px2rem') - 添加配置 :
px2rem({ remUnit: 37.5 })
- 引入模塊 :
px2rem({ remUnit: 37.5 }) 的意思就是1rem = 37.5px 這個是根據(jù)375px設(shè)計稿來的
- 2.3 改后代碼
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
}),
px2rem({ remUnit: 37.5 }), // 添加的代碼
postcssNormalize()
],
sourceMap: isEnvProduction && shouldUseSourceMap
}
}
3. 引入
- 在
入口文件 index.js里引入lib-flexible
import 'lib-flexible'
4. 演示
- 4.1 編寫的代碼樣式
.one {
width: 200px;
height: 200px;
font-size: 50px;
background: pink;
}
-
4.2 效果1 : 375px寬
image.png -
4.3 效果2 :
image.png -
4.4 效果3
image.png
備注
取消 70px /*no*/
