vue中，如何将这两张合在一起并适配所有大小的页面？

  • Z时代
  • 2024-03-02
  • 分类：IT

需要将这两张图片↓

在页面中合并为这样↓

我用绝对定位做了，但是换个页面大小就漂移了，，

图片URL地址：

如上所示，小弟先谢谢各位大神们的解答！感激不尽！

回答：

动态单位配合响应式，使用@media and (max-width:365px)媒体查询
动态单位参考

1.vw(浏览器内置的动态单位,100vw=页面可视宽度)
2.rem,rem与页面根节点html的字体大小相关，一般会搭配一段根据当前设备的大小动态计算根节点字体大小的js

动态rem方式之一

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

input框完全可以使用样式实现，背景色+阴影+圆角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .input{
            width:20vw;
            height:3vw;
            line-height: 3vw;
            font-size: 1.5vw;
            border: none;
            outline: none;
            border-radius:2vw;
            background:url(https://i.328888.xyz/2023/04/06/iITckN.jpg) #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;
        }
    </style>
</head>
<body>
    <input class="input" type="text" />
</body>
</html>

效果图

vue中，如何将这两张合在一起并适配所有大小的页面？

回答：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .demo {
      padding: 20px;
      position: relative;
      flex-shrink: 0;
    }
    .demo::before, .demo::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border-radius: 100px;
    }
    .demo::before  {
      background: yellow;
      z-index: 2;
    }
    .demo::after {
      background-color: #704e46;
      top: 6px;
      bottom: -6px;
      z-index: 1;
    }
    .demo .body {
      display: flex;
      align-items: center;
      position: relative;
      z-index: 3;
    }
    .demo .body span {
      flex: 1;
      text-align: center;
    }
    .demo .body img {
      max-width: unset;
      max-height: unset;
      flex-shrink: 0;
      width: 40px;
    }
  </style>
</head>
<body>
  <div class="demo">
    <div class="body">
      <span>按钮</span>
      <img src="https://i.328888.xyz/2023/04/06/iITckN.jpg"/>
    </div>
  </div>
</body>
</html>

以上是 vue中，如何将这两张合在一起并适配所有大小的页面？ 的全部内容， 来源链接： utcz.com/p/933992.html

回到顶部