Question

因此，我的页面之一始终有一个带背景图像的Div，该背景图像会根据媒体查询而变化（例如，我从Phone的CDN中获取较小的分辨率）。

现在，由于我获得了页面加载时的图片网址，因此需要将其设置为CSS，这对于计算出的Style属性来说很好，但那些不支持媒体查询。

我看到的唯一解决方案是一些Resize Event Listener，但我希望获得一个干净的解决方案。

示例代码片段在带有预定义网址的CSS中的外观：

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
  .image {
        background: linear-gradient(rgba(255, 255, 255, 0.0), rgba(0, 0, 0, 0.95)), url("https://res.cloudinary.com/.../image/upload/c_scale,w_900/v.../3.jpg") no-repeat center;
        background: -webkit-linear-gradient(rgba(255, 255, 255, 0.0), rgba(0, 0, 0, 0.95)), url("https://res.cloudinary.com/.../image/upload/c_scale,w_900/v.../3.jpg") no-repeat center;
      }
  }

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
  .image {
        background: linear-gradient(rgba(255, 255, 255, 0.0), rgba(0, 0, 0, 0.95)), url("https://res.cloudinary.com/.../image/upload/c_scale,w_1300/v.../3.jpg") no-repeat center;
        background: -webkit-linear-gradient(rgba(255, 255, 255, 0.0), rgba(0, 0, 0, 0.95)), url("https://res.cloudinary.com/.../image/upload/c_scale,w_1300/v.../3.jp"") no-repeat center;
      }
  }

Answer 1

您的资产是否包括在构建输出中？如果是这样，您应该让Webpack deal with creating the paths而不是对其进行硬编码。

如果不是这样，您可以查看CSS image-set，它是一种在媒体查询之外定义响应图像的方法。但是，browser support isn't great。

最后，您可以在HTML中使用srcset属性，然后根据媒体查询隐藏/显示元素。

-编辑：

我忘记了您实际上可以在VUE.js模板中绑定样式。 v-bind:style Here's an example。这实际上是在更改在构建时编译的样式块。它不是内联的“计算”样式。

-编辑＃2

使用VUE设置CSS变量--backgroundImage，然后可以在CSS的媒体查询中使用它。有人举了一个很好的Codepen例子。

CSS

:root {
  --backgroundImage: 'blank.png';
}

div {
  background-image: var(--backgroundImage);
}

VUE

watch: {
    img(val){
    element.style.setProperty('--backgroundImage', val)
    }
}

Answer 2

我想到的最简单的解决方案是保存页面安装时的窗口宽度，并根据该值add dynamically a class。

data() {
   return {
      deviceWidth: 0
   }
}

设置组件安装挂钩上的值

created() {
   this.deviceWidth = window.innerWidth;
}

在您的模板上

// handle extra sizes
<element 
   :class="{'image-ios': deviceWidth < 480, 'image-small': deviceWidth >= 480}"></element>

请注意，您不需要resizeListener，因为在现实生活中从智能手机进入时不会发生调整大小，因此在安装/创建时屏幕的宽度将足够

在Vue中使用具有动态属性的媒体查询

2 个答案: