引出問題
- 設(shè)計標一個50px,為什么我們需要除以2后，寫成25px呢?
- 為什么在移動端開發(fā)過程中，我的紅米手機分辨率達到了2400x1080,但是安裝設(shè)計的750尺寸下寫的像素看起來大小也合適呢，不應(yīng)該會變得很小很小嗎
- em和rem是用來做什么的?
物理像素和邏輯像素
pt: html css中的使用的單位像素px: 實際上指的是邏輯像素pt
px: photoshop測量中的但是實際上指的是物理像素, 物理像素即表示的是一個點, 大小固定
iphone6中一個單位的邏輯像素包含2個物理像素
瀏覽器上展示的iphone6為375 * 667 實際上指的是邏輯像素為375 * 667
一般移動端的設(shè)計圖紙一般是給的是750*1334, 是因為一個邏輯像素pt包含兩個物理像素px
UI設(shè)計師通過ps軟件測量的是物理像素點，我認為就是真實的物理電子點
UI 設(shè)計圖紙750*1334自然也是指的是物理像素的概念...
UI設(shè)計標注某個控件50px,自然也是物理像素，轉(zhuǎn)換為邏輯像素就是25px,這就是為什么要除以2的原因
雖然我的紅米2400 * 1080，實際上邏輯分辨率是393*873，所以用iphone6的邏輯分辨率差不多，所以也適用于 iphone6下的邏輯像素大小
在我的紅米下，雖然我的手機物理分辨率更大，但是一個邏輯像素明顯會對應(yīng)出更多的物理像素，所以不至于按照iphone6寫的邏輯像素變得非常小
以上px寫法只是適合移動端手機
em和rem
- em是相對長度單位。相對于當前對象內(nèi)文本的字體尺寸,如果父節(jié)點
1.2em,子節(jié)點1.2em,實際就是1.2*1.2了 - rem是使得em只相當于根節(jié)點的font-size
<title></title>
<script>function rem() {var w = document.documentElement.getBoundingClientRect().width;document.querySelector('html').style.fontSize = w * 100 / 750 + 'px'}rem();window.onresize = rem;</script>
</head>
<body>
<div id="root"></div>
<script>
})
</script>
- 上面的fontSize在iphone6下也就是50px=1rem
@function rem($px) {
@return $px / 100 + rem
};
- 這個轉(zhuǎn)換是針對UI設(shè)計師標注的像素轉(zhuǎn)換為rem,UI 標注了例如x個px(物理像素)，那么要轉(zhuǎn)換為邏輯像素就是x/2;再轉(zhuǎn)換為rem,就是x/2/50=x/100
css寫法
.container {
background: red;
width: rem(750);
image.png
- 在750物理像素設(shè)計圖紙下(iphone6)，邏輯像素是375，所以1rem=
375*100/750;rem(750)=7.5rem=475px
px轉(zhuǎn)換轉(zhuǎn)換為rem
- 我們平時是按照iphone6來對標的，適合手機，對大屏差異比較大(大屏邏輯分辨率查詢百度"我的分辨率"，得出1080*1920)，所以用手機的px,看起來自然會比較小
在大屏上需要通過rem來避免字體過小 - 安裝依賴
npm install lib-flexible postcss-px2rem-exclude -D
- confige-override.js增加,適應(yīng)px2rem后，需要注意
- 1rem始終=37.5px,原來html設(shè)置的沒有用了
- 注意1px不要轉(zhuǎn)換，否則可能看不到了，可以把px寫成大寫的PX，避免轉(zhuǎn)換
- 注意刪除html的font-size,否則會出現(xiàn)先放大后縮小的異常情況
addPostcssPlugins([
require("postcss-import")({}),
require("postcss-url")({}),
require("postcss-preset-env")({}), // 可以使用 css 未來的特性 postcss-cssnext 已棄用
require("postcss-px2rem-exclude")({
// remUnit 等于 設(shè)計稿寬度 375除以10 37.5
remUnit: 37.5,//轉(zhuǎn)換時候37.5px轉(zhuǎn)為1rem,1rem=37.5px，.html的font_size不再是比例
//remUnit: 50,//轉(zhuǎn)換時候50px轉(zhuǎn)為1rem,1rem還是等于37.5px,.html的font_size不再是比例
exclude: /node_modules/i
})
]),
- 入口增加
import "lib-flexible";
- rem轉(zhuǎn)換修改
x/2,然后x/2/37.5,于是就是x/75
@function rem($px) {
@return $px / 75 + rem
};
- 注意，內(nèi)聯(lián)樣式插件不會自動修改,所以增加方法轉(zhuǎn)換
//傳入的px已經(jīng)是UI給的物理像素/2后的邏輯像素，37.5個邏輯像素=1rem
export const px2rem = (px: number) => {
return px/37.5+'rem'
}
- 如果需要第三方組件也能夠轉(zhuǎn)換，去掉exclude
exclude: /node_modules/i
參考資料
1.邏輯像素pt和物理像素px
2.px、em、rem區(qū)別介紹
3.React px轉(zhuǎn)rem
3.大屏適配有道筆記
