js实现移动端兼容设置
例如：我们需要在移动端设置一个菜单栏，使它的宽度刚好等于视口的宽度，并且当我们切换不同的设备的时候，使它的能呈现出一样的效果，因为我们想到可以使用百分比来设置，当随之而来的问题是，里面的所有元素也必须跟着使用百分比。因此，我们使用一下的js代码来实现重置
(()=>{
function winWidth(){
// 获取视口宽度
let width = window.screen.width
// 获取文档元素
let dom = document.documentElement
//设置字体大小
dom.style.fontSize = width/3.75+"px"
}
winWidth()
// 窗口改变时，同步更新
window.addEventListener("resize",()=>{
winWidth()
},false)
})()
我们以iPhone6作为标准进行样式设置，并且将基数设置为100，以便后续的计算。此时，我们需要以rem为单位进行布局，而不再是使用px布局。全部代码如下所示，当我们切换不同的设置的时候，页面也能按照我们期望的形式显示出来。
<!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>适配屏幕</title>
<script>
(()=>{
function winWidth(){
// 获取视口宽度
let width = window.screen.width
// 获取文档元素
let dom = document.documentElement
//设置字体大小
dom.style.fontSize = width/3.75+"px"
}
winWidth()
// 窗口改变时，字体大小跟着改变
window.addEventListener("resize",()=>{
winWidth()
},false)
})()
</script>
</head>
<style>
*{
margin: 0;
padding: 0;
}
p{
font-size: .2rem;
}
header{
margin-top: .2rem;
font-size: .16rem;
width: 3.75rem;
height: 0.3rem;
background-color: aqua;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
</style>
<body>
<p>我是一句话</p>
<header>
我是头部，我会跟着移动端设备的改变而改变
</header>
</body>
</html>