vue屏幕自适应

仅支持宽度自适应,页面等比例缩放,不会失真

mounted() {
    //自适应窗口
    if (window.screen.width > 1200) {
      function bodyScale() {
        let deviceWidth = document.documentElement.clientWidth;
        let scale = deviceWidth / 1920;
        document.body.style.zoom = scale;
      }
      window.onload = window.onresize = function () {
        bodyScale();
      };
    }
  },

直接加在你要实现自适应的页面即可看到效果

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使Vue页面自适应屏幕,您可以使用CSS中的媒体查询和Flexbox布局来实现响应式设计。下面是一些步骤: 1. 在Vue组件的样式部分添加媒体查询,以根据不同的屏幕尺寸应用不同的样式。媒体查询可以根据屏幕宽度或设备特性进行条件判断。例如,以下媒体查询将在屏幕宽度小于等于768px时应用样式: ```css @media (max-width: 768px) { /* 样式规则 */ } ``` 2. 使用Flexbox布局来实现页面的自适应。Flexbox可以使元素在容器中自动填充可用空间,并根据需要进行换行或缩放。在Vue组件的模板部分,使用Flexbox属性来控制元素的布局。例如,以下代码将在父容器中使用Flexbox布局,并使子元素平均分布在水平方向: ```html <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> ``` ```css .container { display: flex; justify-content: space-between; } ``` 3. 使用CSS单位来调整元素的尺寸和间距。相对单位(如百分比)可以根据屏幕尺寸进行自适应调整。另外,可以使用CSS的`@media`规则和`min-width`、`max-width`属性来定义不同屏幕尺寸下的样式。例如,以下代码将在屏幕宽度小于等于768px时将元素宽度设置为100%: ```css @media (max-width: 768px) { .item { width: 100%; } } ``` 通过结合媒体查询、Flexbox布局和CSS单位,您可以实现Vue页面的自适应屏幕效果。根据项目需求和设计要求,您可以调整和定制这些样式规则。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值