5. 移动端适配rem方案
2022-10-07 本文已影响0人
未路过
1. rem+动态html的font-size
- rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。
- 比如如下案例：
1.设置一个盒子的宽度是2rem；
2.设置不同的屏幕上html的font-size不同；
image.png
- 这样在开发中，我们只需要考虑两个问题：
问题一：针对不同的屏幕，设置html不同的font-size；
问题二：将原来要设置的尺寸，转化成rem单位；
2. rem的font-size尺寸
2.1 方案一：媒体查询
- 可以通过媒体查询来设置不同尺寸范围内的屏幕html的font-size尺寸；
- 缺点：
1.我们需要针对不同的屏幕编写大量的媒体查询；
2.如果动态改变尺寸，不会实时的进行更新；(媒体查询只能修改某个范围区间里面的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>
<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代码
- 如果希望实时改变屏幕尺寸时，font-size也可以实时更改，可以通过js代码；
- 方法：
1.根据html的宽度计算出font-size的大小，并且设置到html上；
2.监听页面的实时改变，并且重新设置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>
<!-- 动态的修改html的font-size -->
<span>哈哈哈哈哈哈</span>
</body>
</html>
js
// 1.获取html的元素
const htmlEl = document.documentElement;
function setRemUnit() {
// 2.获取html的宽度(视口的宽度)
const htmlWidth = htmlEl.clientWidth;
// 3.根据宽度计算一个html的font-size的大小
const htmlFontSize = htmlWidth / 10;
// 4.将font-size设置到html上
htmlEl.style.fontSize = htmlFontSize + "px";
}
// 保证第一次进来时, 可以设置一次font-size
setRemUnit();
// 当屏幕尺寸发生变化时, 实时来修改html的font-size
window.addEventListener("resize", setRemUnit);
2.3 方案三：lib-flexible库
事实上，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转成对应的rem值；
- 100/37.5=2.6667，其他也是相同的方法计算即可；
3.2 方案二：less/scss函数
3.3 方案三：postcss-pxtorem
3.4 方案四：VSCode插件
px to rem 的插件，在编写时自动转化
