利用JavaScript判断页面宽度的响应式布局方法
我的站长站
2023-07-15
共人阅读
分享一个我的站长站自用的响应式网站布局方法，非常简单好用。利用JavaScript判断页面宽度，结合rem单位， 实时修改网站尺寸，达到响应式布局方法。
首先前端开发中，样式尺寸单位全部用rem，比如：
.content{
width: 8rem;
border-radius: 0.15rem;
font-size: 0.95rem;
letter-spacing: 0.15rem;
｝接着页面中的html给个默认的font-size样式，比如：
<html style="font-size: 100px;">
或者
<style>
html{font-size: 100px;}
</style>最后就是利用JavaScript判断页面宽度，实时修改html的font-size的大小。
<script>
const doc = document.documentElement
window.onresize = () => {
// 获取窗口宽度
let width = doc.clientWidth
// 设备宽度 / 设计稿宽度 = 根元素html大小 / 设计稿根元素大小(假设为100px)
// 假设我们的设计稿宽度为 750px
if (width >= 1080) {
doc.style.fontSize = '100px'
} else {
doc.style.fontSize = width / 1080 * 100 + 'px'
}
console.log(width)
}
</script>rem单位就可以随着html的font-size的大小自动修改大小，达到响应式布局的效果。