1. rem+動態(tài)html的font-size
1.rem單位是相對于html元素的font-size來設(shè)置的，那么如果我們需要在不同的屏幕下有不同的尺寸，可以動態(tài)的修改html的font-size尺寸。
2.比如如下案例：
設(shè)置一個盒子的寬度是2rem；
設(shè)置不同的屏幕上html的font-size不同；
image
- 這樣在開發(fā)中，我們只需要考慮兩個問題：
問題一：針對不同的屏幕，設(shè)置html不同的font-size；
問題二：將原來要設(shè)置的尺寸，轉(zhuǎn)化成rem單位；
2. rem的font-size尺寸
2.1 方案一：媒體查詢
- 可以通過媒體查詢來設(shè)置不同尺寸范圍內(nèi)的屏幕html的font-size尺寸；
- 缺點(diǎn)：
1.我們需要針對不同的屏幕編寫大量的媒體查詢；
2.如果動態(tài)改變尺寸，不會實(shí)時的進(jìn)行更新；(媒體查詢只能修改某個范圍區(qū)間里面的html的字體大小，在這個區(qū)間里面，盒子大小都是一樣的，我們是希望實(shí)時改變的)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media screen and (min-width: 320px) {
html {
font-size: 20px;
}
}
@media screen and (min-width: 375px) {
html {
font-size: 24px;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 28px;
}
}
@media screen and (min-width: 480px) {
html {
font-size: 32px;
}
}
.box {
width: 5rem;
height: 5rem;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
2.2 方案二：編寫js代碼
- 如果希望實(shí)時改變屏幕尺寸時，font-size也可以實(shí)時更改，可以通過js代碼；
- 方法：
1.根據(jù)html的寬度計(jì)算出font-size的大小，并且設(shè)置到html上；
2.監(jiān)聽頁面的實(shí)時改變，并且重新設(shè)置font-size的大小到html上；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/hy_flexible.js"></script>
<style>
body {
font-size: 16px;
}
.box {
width: 5rem;
height: 5rem;
background-color: orange;
}
p {
font-size: 0.5rem;
}
</style>
</head>
<body>
<div class="box">
</div>
<p>我是文本</p>
<!-- 動態(tài)的修改html的font-size -->
<span>哈哈哈哈哈哈</span>
</body>
</html>
js
// 1.獲取html的元素
const htmlEl = document.documentElement;
function setRemUnit() {
// 2.獲取html的寬度(視口的寬度)
const htmlWidth = htmlEl.clientWidth;
// 3.根據(jù)寬度計(jì)算一個html的font-size的大小
const htmlFontSize = htmlWidth / 10;
// 4.將font-size設(shè)置到html上
htmlEl.style.fontSize = htmlFontSize + "px";
}
// 保證第一次進(jìn)來時, 可以設(shè)置一次font-size
setRemUnit();
// 當(dāng)屏幕尺寸發(fā)生變化時, 實(shí)時來修改html的font-size
window.addEventListener("resize", setRemUnit);
2.3 方案三：lib-flexible庫
事實(shí)上，lib-flexible庫做的事情是相同的，你也可以直接引入它；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/lib_flexible.js"></script>
<style>
.box {
width: 5rem;
height: 5rem;
background-color: orange;
}
p {
font-size: 0.5rem;
}
</style>
</head>
<body>
<div class="box">
</div>
<p>我是文本</p>
</body>
</html>
lib_flexible.js
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
3. rem的單位換算
3.1 方案一：手動換算
- 比如有一個在375px屏幕上，100px寬度和高度的盒子；
- 我們需要將100px轉(zhuǎn)成對應(yīng)的rem值；
- 100/37.5=2.6667，其他也是相同的方法計(jì)算即可；
3.2 方案二：less/scss函數(shù)
3.3 方案三：postcss-pxtorem
3.4 方案四：VSCode插件
px to rem 的插件，在編寫時自動轉(zhuǎn)化
