vue H5文本框定位到某个固定位置,背景全屏,适应所有屏幕(div大小变化时,背景与内容相对位置不改变)

性野喜悲

已于 2022-05-11 17:30:46 修改

阅读量1.9k

点赞数

分类专栏： vue 经验分享文章标签： vue.js javascript 前端

于 2020-11-24 16:05:32 首次发布

本文链接：https://blog.csdn.net/leng0920/article/details/110084898

版权

经验分享同时被 2 个专栏收录

149 篇文章 1 订阅

订阅专栏

vue

136 篇文章 4 订阅

订阅专栏

注意：要想物体在所有手机上显示的位置都一样，从一开始就要选择百分比定位

上下直接调整百分比（一定要用百分比）

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>VIP参会嘉宾邀请函生成链接</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css" />
  <style>
    #app {
      width: 100%;
      height: auto;
      position: relative;
    }

    .aa {
      width: 100%;
      height: auto;
    }

    .inputName {
      border: none;
      background: transparent;
      color: #ffffff;
      font-size: 65px;
      font-family: FZRUIZH_JW--GB1-0;
      position: absolute;
      top: 61.7%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      text-align: center;
      outline: transparent;
      z-index: 1;
    }

    /* 去除placeholder默认样式 */
    .inputName::-webkit-input-placeholder {
      color: #fff;
    }

    .inputName::-moz-placeholder {
      color: #fff;
    }

    .inputName::-moz-placeholder {
      color: #fff;
    }

    .inputName::-ms-input-placeholder {
      color: #fff;
    }
  </style>
</head>


<body>
  <div id="app">
    <div class="aa">
      <img id="scream" :src="imgSrc" alt="The Scream" width="100%">
      <input autofocus type="text" v-model="name" class="inputName" placeholder="点击输入姓名">
     			<!-- 宽高比判断(百分比不同机型可能不太相同,宽高比*一定的基数会准一点) -->
<!-- 			 <input autofocus type="text" v-model="name" class="inputName" placeholder="点击输入姓名" :style="{top:`${bodyWidth/bodyHeight * 102}%`}"> -->
    </div>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        name: '',
        toast: null,
        imgSrc: 'https://eventimg.oss-cn-shenzhen.aliyuncs.com/invitation/vip.png',
        bodyWidth: document.body.clientWidth,//获取body宽度
        bodyHeight: document.body.clientHeight//获取body高度
      },
      created() {


      },

    })

  </script>

</body>


</html>