前端css + js +vue +element-ui 实现响应式布局，根据浏览器窗体大小自动响应-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端css + js +vue +element-ui 实现响应式布局，根据浏览器窗体大小自动响应。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、环境

我的环境是element-ui vue版的，其他的也可以，主要是css和js的内容

2、js代码

<script>
export default {
  data() {
    return {
      scaledStyle: {
        transform: '',
        "transform-origin": "left",
      },
    }
  },
  mounted() {
    this.$nextTick(()=> {
      this.updateScaledStyle()
    })
    window.addEventListener('resize', this.updateScaledStyle)
  },
  methods: {
    updateScaledStyle() {
      let innerWidth =  window.innerWidth
      const scaleX = innerWidth / 1920;
      this.scaledStyle.transform = `scale(${scaleX},1)`;
    }
}
</script>

3、代码解释

1、定义对象

首先在data中定义一个对象

 scaledStyle: {
        transform: '',
        "transform-origin": "left",
      },

其实就是css的样式，不过放在了js 里面而已
这里css设置了两个属性
一个是transform
这个属性对div标签的缩放作用，当浏览器窗口或者屏幕大小改变时，就调整这个属性的值，来等比缩放标签的布局。
另一个是transform-origin
这个属性是设置div标签缩放的圆点位置，也就是以什么位置为圆点缩放的，默认是中间点，但是很多时候以中间点作为圆点缩放是不合理的，根据自己的实际需求设置，我这里设置以左边为圆点缩放，就是当窗口页面变化时，左边不动，右边往左边缩放靠拢。

2、定义方法

其次是

methods: {
    updateScaledStyle() {
      let innerWidth =  window.innerWidth
      const scaleX = innerWidth / 1920;
      this.scaledStyle.transform = `scale(${scaleX},1)`;
    }
}

这里就是在methods里面定义一个方法，监听窗体的变化，然后计算该缩放多少倍。
window.innerWidth 是获取当前窗口的宽度，window里面还有其他属性，例如 innerHeight 获取窗口的高度等，我这里值改变窗口的宽度，所以获取高度。
const scaleX = innerWidth / 1920; 这个是计算缩放的比例，1920是自己定的，就看正常不缩放时窗口的宽度是多少，如果时1080，那就设置1080，当然也可以是页面的某个div，我这里是整个页面。
说白了就是原始不缩放时的宽高。

3、监听窗口变化，计算比例值，并赋值给transform 属性

最后就是

this.scaledStyle.transform = `scale(${scaleX},1)`;

这里其实就是给transform 属性赋值，transform 属性可以赋两个值，也就是x,y值，横边缩放和竖边缩放，这两个值是这样赋值的 scale(0.7,0.8),这就是横向缩小为原来的0.7倍，竖向缩小为原来的0.8倍。
我这里竖向不缩放所以直接写1，横向是根据当前的窗口宽度和原来的比，得到一个比例值决定缩小还是放大的。

4、实现监听

 mounted() {
    this.$nextTick(()=> {
      this.updateScaledStyle()
    })
    window.addEventListener('resize', this.updateScaledStyle)
  },

mounted 是vue生命周期中载入后执行的，但是这里还没有渲染dom，获取不到dom。
意思就是获取不到宽高，所以这里加了一个nextTick获取到下一个更新的dom，以保证能够获取到dom。
获取到dom之后去执行更新方法updateScaledStyle
最后一句 window.addEventListener(‘resize’, this.updateScaledStyle) 就是将 updateScaledStyle方法加入到监听事件中，resize 是监听窗口的额变化，然后执行updateScaledStyle方法，起到窗口变化，同时缩放div的效果

3、html 代码

<template>
  <div  :style="scaledStyle">
	// 其他内容
  </div>
</template>

这里html的代码就简单了，就是定义一个div标签，一个动态的样式。

4、特别注意

这里div里面的所有样式不能用%,例如宽5%，高10%这些百分比的样式。
不然缩放的事样式按百分比缩放会乱。
这是我遇到的问题，你们可以试一下。
个人觉得它这个缩放其实是把div下的所有内容当做一张图一样来缩放，所以你在里面写的固定px值也会跟着缩放。文章来源地址https://www.toymoban.com/news/detail-639599.html

到了这里，关于前端css + js +vue +element-ui 实现响应式布局，根据浏览器窗体大小自动响应的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！