如何使用 Vue 实现双图片合并并适配不同页面大小？

有志者，事竟成！如果你在学习文章，那么本文《如何使用 Vue 实现双图片合并并适配不同页面大小？ 》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

vue中双图片合并且适配页面大小

为了将两张图片合并并在不同页面大小下保持适应性，可以使用以下方法：

首先，使用动态单位配合响应式设计。动态单位包括vw（浏览器可视宽度的百分比）和rem（依赖于页面根节点html的字体大小）。

使用rem动态设置方法之一：

function refreshRem() {
  const whdef = 100 / 750;
  const bodyWidth = document.body.clientWidth;
  const rem = whdef * bodyWidth;
  document.getElementsByTagName('html')['0'].style.fontSize = `${rem}px`;
}

其次，实现输入框样式，可以使用css轻松实现，包括背景色、阴影和圆角：

.input {
  width: 20vw;
  height: 3vw;
  line-height: 3vw;
  font-size: 1.5vw;
  border: none;
  outline: none;
  border-radius: 2vw;
  background: url(path/to/image.png) #fefdd7 17vw center/2vw 2vw no-repeat;
  box-shadow: 0 3px 0 0 #705048;
  position: relative;
  box-sizing: border-box;
  padding: 0 4vw 0 2vw;
}

效果展示：

[图片]

今天关于《如何使用 Vue 实现双图片合并并适配不同页面大小？ 》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！