移動端rem怎麼用?
阿新 • • 發佈：2018-12-23
簡單說明下，一般字型有4種，px,pt,em,rem,這裡簡單介紹兩個px和rem。
在做移動端專案當中呢推薦大家使用rem來當單位，因為真的很方便，可以根據比例適配不同的螢幕大小。
使用rem的方式其實很簡單，這裡不得不向大家推薦下阿里巴巴團隊提供的外掛。
只需要三個步驟：
1.新增<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
2.設定預設的：<meta name="flexible" content="initial-dpr=2" />
3.引入阿里的cdn：<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
下面是簡單的例子，可以複製看看，用谷歌瀏覽器模擬移動端不同型號檢視效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="flexible" content="initial-dpr=2" />
<title>移動端字型適配</title>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.test2,.test3,.test4,.test5,.test6{
width: 4.9rem;
height: 5rem;
line-height: 5rem;
font-size: 1rem;
text-align: center;
display: inline-block;
}
.test2{
background-color: orange;
}
.test3{
background-color: #0000FF;
}
.test4{
background-color: #FF0000;
}
.test5{
background-color: aqua;
}
</style>
</head>
<body>
<div class="test2">111111</div>
<div class="test3">222222</div>
<div class="test4">333333</div>
<div class="test5">444444</div>
</body>
</html> 效果是這樣的：
細心地朋友已經看到了，在iphone5和iphone6的螢幕寬度下，html的size的大小是不同的，但是也有朋友會問，
body為什麼都是12px呢？我之前也很疑惑，諮詢了一位大牛後豁然開朗，怎麼能沒有預設全體字型大小呢？
如果沒有預設大小的話，body就會繼承html的大小。
這是我自己用rem寫的一個移動端練習，模擬的手機淘寶，寫的不是很好，可以看看：