移动端和PC端响应式布局

最新推荐文章于 2024-09-30 17:45:42 发布

GMLGDJ

最新推荐文章于 2024-09-30 17:45:42 发布

阅读量3.5k

点赞数

分类专栏： JavaScript # css 文章标签：前端 javascript css

本文链接：https://blog.csdn.net/GMLGDJ/article/details/123635003

版权

JavaScript 同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

该博客介绍了如何在React和Vue项目中实现全局响应式布局。只需在index.html文件中添加一个名为`remSize`的函数，根据设备宽度动态设置字体大小，从而实现布局的自适应。在窗口尺寸变化时，通过监听`onresize`事件来更新布局。这种方法有助于在不同屏幕尺寸下保持页面的良好显示效果。

摘要由CSDN通过智能技术生成

只需要在需要响应式布局的页面添加下面的方法即可,在react或vue的脚手架中只需要在index.html文件中添加改方法就可以实现全局响应式布局了(因为react和vue都是单页面)

function remSize() {
  // 获取移动设备的宽度 
  var deviceWidth = document.documentElement.clientWidth || window.innerWidth
  // 设置最大宽度 (需要限制宽度时添加)
  if (deviceWidth >= 750) {
    deviceWidth = 750
  }
  // 设置最小宽度 (需要限制宽度时添加)
  if (deviceWidth <= 320) {
    deviceWidth = 320
  }
  document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'
  // 在width=375px时 10px = 0.1rem 在不限制宽度时width:100%; 等同于 width:7.5rem;
  document.querySelector('body').style.fontSize = 0.32 + 'rem'
}

remSize()
// 窗口发生变化时调用
window.onresize = () => {
  remSize()
}