rem
- 這個(gè)單位代表根元素的 font-size 大?。ɡ?<html> 元素的font-size）。
- rem 與 em 的區(qū)別
首先理解em的意義，它表示當(dāng)前元素的font-size的計(jì)算值，即em==font-size
兩者區(qū)別：rem 是相對(duì)于根元素的 font-size，而 em 是相對(duì)于當(dāng)前元素的font-size - 手機(jī)端方案的特點(diǎn)
- 所有手機(jī)顯示的界面都是一樣的，只是大小不同
-
1 rem == html font-size == viewport width
一切單位以寬度為基準(zhǔn)，就能完美還原設(shè)計(jì)稿
- 使用 js 動(dòng)態(tài)調(diào)整 rem
// html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script>
// 1 rem 等于一個(gè)頁(yè)面的寬度
var pageWidth = window.innerWidth
document.write('<style>html{font-size: '+pageWidth+'px;}</style>')
</script>
</head>
<body>
<div class="parent clearfix">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
</body>
</html>
// css
*{margin:0;padding:0;}
body{
// 設(shè)置字體大小，不然就變成和頁(yè)面一樣大了
font-size: 16px;
}
.child{
background-color: #ddd;
float: left;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
// 所有寬高邊距等都用 rem 設(shè)置
.child{
width: 0.4rem;
height: 0.2rem;
margin: 0.05rem;
}
這樣，不論手機(jī)寬度如何，比例仍然是一樣的，只是大小不同
另外，直接將rem與頁(yè)面寬度等同，太大了，設(shè)置css都要使用小數(shù)，很麻煩
所以可以設(shè)置的小一點(diǎn)，比如百分之一，但是這樣可能會(huì)出現(xiàn)一個(gè)新的問(wèn)題
var pageWidth = window.innerWidth
document.write('<style>html{font-size: '+ pageWidth/100 +'px;}</style>')
得到的font-size值太小，別忘了chrome默認(rèn)限制font-size最小為12px，于是頁(yè)面就變‘大了’
為了防止這樣的情況，不能除以太大的數(shù)字
var pageWidth = window.innerWidth
document.write('<style>html{font-size: '+ pageWidth/10 +'px;}</style>')
一般而言，10比較合適，因?yàn)橹悄苁謾C(jī)屏幕通常在300-400px左右，除以10后在30-40，不會(huì)出現(xiàn)因?yàn)椤?2px原則’而被‘放大頁(yè)面’
- rem 可以與其他單位同時(shí)存在
font-size: 16px;
border: 1px solid red;
width: 0.5rem;
比如 font-size，如果使用rem，會(huì)在屏幕很小的時(shí)候變得很難看
還有border，1px轉(zhuǎn)換rem在屏幕太小的時(shí)候仍然是1px，因?yàn)闉g覽器最小就是1px了
這里建議太小的單位，或者如font-size這樣的（字體太大太小都不好看），可以使用其它單位與rem混合使用
比如px、em
- 在 SCSS 里使用 PX2REM
這個(gè)是node-sass,
npm config set registry https://registry.npm.taobao.org/
touch ~/.bashrc
echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc
source ~/.bashrc
npm i -g node-sass
mkdir ~/Desktop/scss-demo
cd ~/Desktop/scss-demo
mkdir scss css
touch scss/style.scss
start scss/style.scss
node-sass -wr scss -o css
編輯 scss 文件就會(huì)自動(dòng)得到 css 文件
在 scss 文件里添加
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是設(shè)計(jì)稿的寬度，你要根據(jù)設(shè)計(jì)稿的寬度填寫。如果設(shè)計(jì)師的設(shè)計(jì)稿寬度不統(tǒng)一，就殺死設(shè)計(jì)師，換個(gè)新的。
.child{
width: px(320);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}
即可實(shí)現(xiàn) px 自動(dòng)變 rem
饑人谷教學(xué)視頻
一些知識(shí)點(diǎn)
- 如果不給頁(yè)面添加
font-size，則默認(rèn)字體大小為16px - Chrome有最小字號(hào)設(shè)置，一般默認(rèn)為12px，這個(gè)時(shí)候即使你設(shè)置更小的像素也無(wú)法生效，依然是12px（僅chrome）
