在css中应用vw单位写一个适配移动端屏幕的弹窗

篝火旁
432 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

前言

移动端网页的适配有很多种的，我按照我的需求，在css中用了 vw 单位。接下来就演示下怎么用，具体的概念请移步到相关的官方文档中查阅。这篇文章重点写怎么用。
本文主要内容：

  • 弹窗适配展示
  • 贴出源代码
  • 分析
  • 写在最后

准备一个弹窗

先看几张弹窗的图片，别走开啊！

正常的尺寸

image.png

接下来的都是我手动调整的宽度啦，看着还是很舒服的

image.png

再来看看更小尺寸的

image.png

你是不是也觉得真不错呢！

弹窗的html+css结构

<body>
    <div class="box">
      <div class="top flex-cc">标题</div>
      <div class="center flex-cc">这里是主要内容</div>
      <div class="bottom">
        <div class="btn flex-cc">按钮</div>
        <p class="tips flex-cc">这是一行提示啊</p>
      </div>
    </div>
</body>

body {
    position: relative;
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    background-color: #000;
  }
  .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    padding: 6vw 0;
    background-color: #fff;
  }
  .box > div {
    width: 70vw;
  }
  .flex-cc {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .top {
    height: 10vw;
    font-size: 6vw;
    outline: 1px solid blue;
  }
  .center {
    height: 40vw;
    margin-top: 8vw;
    font-size: 4vw;
    outline: 1px solid red;
  }
  .bottom {
    margin-top: 8vw;
  }
  .bottom .btn {
    height: 10vw;
    font-size: 3.3vw;
    outline: 1px solid #000;
  }
  .bottom .tips {
    font-size: 3vw;
    color: #a7a7a7;
    margin-top: 4vw;
  }

别忘了在 head标签 中添加这句

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

分析

在上面的css代码中，可以看到单位都用了 vw，outline 的1px我不想调啊，请无视，哈哈哈。vw主要是根据浏览器的可是宽度来改变的，我们的.box设置为了80vw，这时相当于浏览器宽度的80%，既然最外层用了vw，那么想完成适配，内部的子元素的单位也必须要和符元素统一。那用%行不行啊，按我的经验就不推荐用%单位的，曾经我也在vw宽度下元素的宽度设置为百分比，在设置一行溢出显示省略号的时候，不准确，文字都穿出盒子了。用vw时做到单位的统一，基本就可以适配移动端的竖屏状态啦。

写在最后

至此，文章就分享完毕了，欢迎在评论区交流。
如果文章对你有所帮助，不要忘了点上宝贵的一赞！
听说点赞的人运气都不差，相信来年第一个升职加薪的一定是你～

avatar
文章
阅读
粉丝