建设银行益阳市分行桃江支行网站,公司网站上传图片,网站建设书,招聘海报模板在线制作免费前端css js vue element-ui 实现响应式布局#xff0c;根据浏览器窗体大小自动响应 1、环境2、js代码3、代码解释1、定义对象2、定义方法3、监听窗口变化#xff0c;计算比例值#xff0c;并赋值给transform 属性4、实现监听 3、html 代码4、特别注意 1、环境
我的环境是e… 前端css js vue element-ui 实现响应式布局根据浏览器窗体大小自动响应 1、环境2、js代码3、代码解释1、定义对象2、定义方法3、监听窗口变化计算比例值并赋值给transform 属性4、实现监听 3、html 代码4、特别注意 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.innerWidthconst 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.innerWidthconst 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 代码
templatediv :stylescaledStyle// 其他内容/div
/template这里html的代码就简单了就是定义一个div标签一个动态的样式。
4、特别注意
这里div里面的所有样式不能用%,例如宽5%高10%这些百分比的样式。 不然缩放的事样式按百分比缩放会乱。 这是我遇到的问题你们可以试一下。 个人觉得它这个缩放其实是把div下的所有内容当做一张图一样来缩放所以你在里面写的固定px值也会跟着缩放。
