标签:winWidth dom js 兼容 width window let 设置 移动
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>
标签:winWidth,dom,js,兼容,width,window,let,设置,移动
来源: https://blog.csdn.net/weixin_45777923/article/details/116353587
本站声明:
1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。