無論是H5移動端還是PC端，網(wǎng)頁的適配一直是前端開發(fā)中一個非常重要的環(huán)節(jié)。為了解決不同屏幕尺寸下，頁面展示不一致的問題，前端工程師們經(jīng)常使用rem作為頁面的單位，通過將像素px轉(zhuǎn)換成rem來解決頁面適配的問題。然而，在Vue開發(fā)中卻有些開發(fā)者不選擇使用rem，那么為什么呢，本文將仔細分析Vue項目不使用rem的原因。

在Vue中，不使用rem有其一定的技術原因。因為在一些簡單的頁面應用中，使用rem確實可以讓樣式統(tǒng)一化，但是在一些復雜的項目中，使用rem卻會存在很多問題。例如，在游戲頁面中使用rem，會因為動態(tài)變化的UI元素導致UI樣式出現(xiàn)混亂，無法達到預期效果。再例如，在中、英文網(wǎng)站中，使用rem來控制字體大小，會因為中英文字符的長度不同而出現(xiàn)排版問題，造成無法達到最佳展示的效果。

.paint_board {
width: 100%;
height: 100%;
background-color: #ffffff;
display: flex;
flex-direction: column;
}
.drag_block {
width: 80%;
height: 200px;
margin: 10px auto;
background-color: #eee;
cursor: move;
}

而不使用rem，可以直接使用px作為樣式單位。PX在Vue中使用更加簡單，同時也不受屏幕尺寸等影響，因此在開發(fā)中使用PX性價比更高。當然，為了保證不同機型下頁面的樣式表現(xiàn)基本一致，可以采用在框架中引入Flexible.js，不使用rem的同時也能夠?qū)崿F(xiàn)屏幕自適應的效果。

import 'flexible.js'; // 在main.js中引入
.paint_board {
width: 100%;
height: 100%;
background-color: #ffffff;
display: flex;
flex-direction: column
}
.drag_block {
width: 80%;
height: 200px;
margin: 10px auto;
background-color: #eee;
cursor: move;
}

總之，在選擇使用rem和px的時候，需要根據(jù)頁面需求來選擇，沒有哪個單位是完美的，使用任何一個單位都會存在一些局限性，需要結合實際情況來選擇最適合的方案。