使用JavaScript实现响应式布局的方法来检测页面宽度
要利用JavaScript判断页面宽度的响应式布局方法，首先需要获取页面的宽度，然后根据不同的屏幕尺寸设置不同的CSS样式。可以使用`window.innerWidth`或`document.documentElement.clientWidth`来获取页面宽度。接下来，可以使用`window.addEventListener('resize', function)`来监听窗口大小变化事件，并在事件回调函数中根据页面宽度设置相应的CSS样式。例如： ```javascript function setResponsiveLayout() { var width = window.innerWidth || document.documentElement.clientWidth; if (width <= 768) { // 设置小屏幕尺寸下的样式 } else { // 设置大屏幕尺寸下的样式 } } setResponsiveLayout(); // 初始化响应式布局 window.addEventListener('resize', setResponsiveLayout); // 监听窗口大小变化事件
分享一个菜鸡源码自用的响应式网站布局方法，非常简单好用。利用JavaScript判断页面宽度，结合rem单位， 实时修改网站尺寸，达到响应式布局方法。
首先前端开发中，样式尺寸单位全部用rem，比如：
.content{width:8rem;border-radius:0.15rem;font-size:0.95rem;letter-spacing:0.15rem;｝接着页面中的html给个默认的font-size样式，比如：
<htmlstyle="font-size:100px;">
或者
<style>html{font-size:100px;}</style>最后就是利用JavaScript判断页面宽度，实时修改html的font-size的大小。
<script>constdoc=document.documentElementwindow.onresize=()=>{//获取窗口宽度letwidth=doc.clientWidth//设备宽度/设计稿宽度=根元素html大小/设计稿根元素大小(假设为100px)//假设我们的设计稿宽度为750pxif(width>=1080){doc.style.fontSize='100px'}else{doc.style.fontSize=width/1080*100+'px'}console.log(width)}</script>rem单位就可以随着html的font-size的大小自动修改大小，达到响应式布局的效果。
