rem與px 的換算
- 計(jì)算公式: 元素的寬度(或高度) / html元素(跟標(biāo)簽)的font-size = rem;
- 舉例 元素的寬度是 200px, html的font-size是100px, 那么元素寬度的rem大小 = 200/100 = 2rem
移動端自適應(yīng)網(wǎng)頁的編寫
- 自適應(yīng): 當(dāng)屏幕的像素變大的時(shí)候,字體和元素也響應(yīng)變大
- 什么是視口: 移動設(shè)備上的viewport就是設(shè)備的屏幕上能用來顯示我們的網(wǎng)頁的那一塊區(qū)域
- 代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 視口寬度與設(shè)備寬度一樣 禁止用戶縮放 -->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Document</title>
<style>
// 當(dāng)我們拖動網(wǎng)頁或者剛改手機(jī)的時(shí)候,html的font-size會發(fā)生改變
html {
font-size: 100px;
}
body {
font-size: 16px;
}
h1 {
font-size: 0.12rem;
}
// 試試手機(jī)為ip6plus和ip5時(shí),div的寬高各是多少(px)
div {
width: 1rem;
height: 1rem;
background: gray;
line-height: 1rem;
}
</style>
</head>
<body>
<script>
function resetWidth() {
// 兼容ie瀏覽器 document.body.clientWidth
var baseWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(baseWidth);
// 默認(rèn)的設(shè)置是375px(ip6)的根元素設(shè)為100px, 其他的手機(jī)都相對這個(gè)進(jìn)行調(diào)整
document.documentElement.style.fontSize = baseWidth / 375 * 100 + 'px'
}
resetWidth();
window.addEventListener('resize', function () {
resetWidth();
})
</script>
<div>
內(nèi)容
</div>
</body>
</html>
postcss-pxtorem 像素自動轉(zhuǎn)換成rem
習(xí)慣了寫px戏溺，所以也希望我在寫px的時(shí)候能夠主動轉(zhuǎn)換成rem，使用 postcss-pxtorem就能實(shí)現(xiàn)我們的愿望
- 安裝postcss-pxtorem
npm i postcss-pxtorem --save-dev
- 打開項(xiàng)目根目錄下的package.json，在postcss的plugins里添加下面的代碼
"postcss-pxtorem": {
"rootValue": 100,
"propList": [
"*"
]
}
image.png
