Использование медиа-запросов с динамическими свойствами в Vue

Question

Таким образом, на одной из моих страниц всегда есть Div с фоновым изображением, которое изменяется в зависимости от медиазапросов (например, я получаю меньшее разрешение из моего CDN на телефоне).

Теперь, когда я получаю URL-адрес изображенияпри загрузке страницы мне нужно установить его в CSS, это было бы хорошо для вычисляемого свойства Style, но они не поддерживают Media Queries.

Единственное решение, которое я видел, - это Resize Event Listener, но я бы предпочелчтобы получить чистое решение.

Пример фрагмента кода, как это выглядит в CSS с предопределенным URL:

/* 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

Самое простое решение, которое приходит мне в голову, - это сохранить ширину окна при монтировании страницы и динамически добавить класс в соответствии со значением.

data() {
   return {
      deviceWidth: 0
   }
}

Установить значение для компонентаmount hook

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

И на вашем шаблоне

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

Обратите внимание, что вам не нужен resizeListener, потому что изменение размера не произойдет в реальной жизни, поступая изсмартфон, поэтому ширина экрана в момент монтажа / создания будет достаточно

Answer 2

Ваши активы включены в результаты сборки?Если это так, вы должны позволить Webpack заняться созданием путей вместо их жесткого кодирования.

Если это не вариант, вы можете взглянуть на CSS image-set, который является способом определения адаптивных изображений вне медиазапросов.Однако поддержка браузера невелика .

Наконец, вы можете использовать атрибут srcset в HTML, а затем скрыть / показать элемент на основе медиазапросов.

- Правка:

Я забыл, что вы можете связывать стили в шаблоне VUE.js.v-bind:style Вот пример .Это фактически меняет блок стиля, который компилируется при сборке.Это не встроенный «вычисляемый» стиль.

- Edit # 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)
    }
}