1.计算公式: 元素的宽度(或高度) / html元素(跟标签)的font-size = rem;
2.举例 元素的宽度是 200px, html的font-size是100px, 那么元素宽度的rem大小 = 200/100 = 2rem
移动端自适应网页的编写
1.自适应: 当屏幕的像素变大的时候,字体和元素也响应变大
2.什么是视口: 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域
3.代码如下
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 视口宽度与设备宽度一样 禁止用户缩放 -->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Document</title>
<style>
// 当我们拖动网页或者刚改手机的时候,html的font-size会发生改变
html {
font-size: 100px;
}
body {
font-size: 16px;
}
h1 {
font-size: 0.12rem;
}
// 试试手机为ip6plus和ip5时,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);
// 默认的设置是375px(ip6)的根元素设为100px, 其他的手机都相对这个进行调整
document.documentElement.style.fontSize = baseWidth / 375 * 100 + 'px'
}
resetWidth();
window.addEventListener('resize', function () {
resetWidth();
})
</script>
<div>
内容
</div>
</body>
</html>
postcss-pxtorem 像素自动转换成rem
1.安装postcss-pxtorem
npm i postcss-pxtorem --save-dev
2.打开项目根目录下的package.json，在postcss的plugins里添加下面的代码
"postcss-pxtorem": {
"rootValue": 100,
"propList": [
"*"
]
}
网友评论