前言
rem 這個(gè)單位對于前端來說并不陌生了,在移動(dòng)端適配方面,我們經(jīng)常會(huì)用到它,通常我們會(huì)采用類似淘寶flexible.js的方案, 寫px,然后通過插件轉(zhuǎn)化成rem赤套。
現(xiàn)在已經(jīng)許多兼容性問題現(xiàn)在不再那么頭疼了,因此我們現(xiàn)在有了更好的適配方案（不需要計(jì)算插件,不需要寫js代碼）.
設(shè)置meta為移動(dòng)端
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
原理
vw表示1%的屏幕寬度,而我們的設(shè)計(jì)稿通常是750px的,屏幕一共是100vw,對應(yīng)750px,那么1px就是0.1333333vw褒搔；
為了方便計(jì)算,我們放大100倍,同時(shí)我們知道另一個(gè)單位rem,rem是相對html元素,為了方便計(jì)算,我們?nèi)tml是100px,通過上面的計(jì)算結(jié)果1px是0.13333333vw,那么100px就是13.333333vw了.
這樣后面的用rem就很好計(jì)算了,這樣就得到13.3333333vw對應(yīng)100px(750px的 設(shè)計(jì)稿),然后我們就可以很愉快的寫rem單位了, 由于倍率是100,我們也不需要啥計(jì)算插件之類的了,除以100,直接小數(shù)點(diǎn)向左移動(dòng)2位,1rem是100px,那么10px就是0.1rem,1px就是0.01rem合是；
不需要用postcss-px-to-viewport這種工具轉(zhuǎn)成一堆小數(shù)位特長的rem單位了,而且這個(gè)很方便,直接寫rem,并不需要轉(zhuǎn)換,用了轉(zhuǎn)換工具 如果想寫px的地方還得設(shè)置白名單或者黑名單,這個(gè)就不存在這種問題了, 想用相對的就rem,想絕對的就直接寫px即可,并不需要其他的各種設(shè)置。
ipad以上的兼容問題
此方案只能兼容手機(jī),甚至連ipad兼容都不好,當(dāng)然,此處的兼容不是兼容問題,是效果問題,只要兼容vw的設(shè)備都能用這個(gè)方案,但是由于適配的根本是vw這個(gè), 這個(gè)會(huì)隨著設(shè)備的寬度越來越大,那么用rem做單位的元素也會(huì)越來越大.
@media screen and (min-width:560px) {
html{
font-size: 54px;
}
}
為什么字體是54px以及為什么是560px為分界線,通過安裝flexible.js模擬出來的,flexible.js 在560px以上屏幕就是html{font-size:54px}
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html {
/* 向下兼容 不止vw時(shí)候 寫死font-size */
font-size: 50px;
/* 7.5rem === 100vw */
font-size: 13.33333333vw;
}
.app {
width: 1rem;
height: 1rem;
background-color: black;
}
p {
font-size: .28rem;
}
span{
font-size: 28px;
}
@media screen and (min-width:560px) {
html{
font-size: 54px;
}
}
/* pc*/
@media screen and (min-width: 999px) {
html{
font-size: 100px;
}
}
</style>
</head>
<body>
<div class="app">
</div>
<p>REM</p>
<span>REM</span>
</body>
</html>
擴(kuò)展
上面那種方式的媒體查詢方式是由小到大的方式励堡，如果我們所寫的頁面包含pc房匆，平板，手機(jī)三端漫萄，可以采用由大到小的方式書寫。代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html {
font-size: 100px;
}
.app {
width: 1rem;
height: 1rem;
background-color: black;
}
p {
font-size: .28rem;
}
span{
font-size: 28px;
}
/* 中等屏幕 */
@media screen and (min-width:992px) and (max-width:1199px) {
html{
}
}
/* 平板 */
@media screen and (min-width: 768px) and (max-width: 991px) {
html {
font-size: 54px;
}
}
/* 手機(jī)*/
@media screen and (max-width: 767px) {
html{
/* 向下兼容 不止vw時(shí)候 寫死font-size */
font-size: 50px;
/* 7.5rem === 100vw */
font-size: 13.33333333vw;
}
}
</style>
</head>
<body>
<div class="app"></div>
<p>REM</p>
<span>REM</span>
</body>
</html>
