当前位置：首页 > article >正文

移动端基础-vw适配

article 2025/2/1 0:48:35

什么是vw

相对单位

相对视口的尺寸

vw:viewport width

换算 1vw=1/100视口宽度

vw不需要向rem一样检查视口宽度

若视口宽为375px

1vw=3.75px

vw与vmin的区别

vmin更照顾横竖屏问题

1vw是视口宽度的100%，而vmin是找宽度和高度中最小的那个，这样横屏看着更舒服

左图单位为vmin，右图用vw

案例

<!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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">


   <title>bilibili-干杯~~~</title>

   <link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico">
   <link rel="stylesheet" href="css/初始化表.css">
   <link rel="stylesheet" href="css/index.css">
   <meta name="keywords" content="..." />
   <style>
      /*写代码时始终要考虑权重问题！
               */

      @font-face {
         font-family: 'icomoon';
         src: url('fonts/icomoon.eot?au9n7q');
         src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?au9n7q') format('truetype'),
            url('fonts/icomoon.woff?au9n7q') format('woff'),
            url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');
         font-weight: normal;
         font-style: normal;
         font-display: block;
      }
   </style>

</head>

<body>
   <header class="suspension">
      <div class="m-navbar">
         <a href="#" class="logo"><img
               src="https://s1.hdslb.com/bfs/static/jinkela/long/mstation/logo-bilibili-pink.png@132w_60h_1c.webp"
               alt=""></a>
         <div class="right">
            <a href="#" class="search">
               <i></i>
            </a>
            <a href="#" class="face">
               <img
                  src="https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/2e2eb9389b504fc2f5b3daa7e3dde71191ef6da7.jpg"
                  alt="">
            </a>
            <div class="app-btn">
               <span>下载&nbsp;App</span>
            </div>
         </div>
      </div>
      <div class="channel-menu">
         <div class="tabs">
            <div class="tabs-list">
               <a href="#">首页</a>
               <a href="#">动画</a>
               <a href="#">番剧</a>
               <a href="#">国创</a>
               <a href="#">音乐</a>
               <a href="#">舞蹈</a>
               <a href="#">游戏</a>
               <a href="#">知识</a>
               <a href="#">科技</a>
               <a href="#">运动</a>
               <div class="line-red"></div>
            </div>
         </div>
         <div class="after">
            <i></i>
         </div>
      </div>
   </header>

   <div class="m-home">
      <div class="video-list">
         <a href="#" class="video-item">
            <div class="card">
               <img src="https://b.zol-img.com.cn/soft/6/485/cecqQ9WB4lCHo.jpg" alt="">
               <div class="count">
                  <span> 138.4万</span>
                  <span> 1323</span>
               </div>
            </div>
            <div class="title">
               <p class="ellipsis-2">实现了课程代码看了没开空间即可健康科技就去玩儿拖与为哦屁以以以以以以看就看就看门</p>
            </div>

         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="https://ts1.cn.mm.bing.net/th/id/R-C.eeb604212956104615f7a7e89c751279?rik=0WpNokXl3cxgYA&riu=http%3a%2f%2fimg.61gequ.com%2fallimg%2f2011-11%2f2011111717442479365.jpg&ehk=I20lC0zcaTtnYfLm%2feTkMr8sOhcmqRRhgJaGPY7%2bSRE%3d&risl=&pid=ImgRaw&r=0" alt="">
               <div class="count">
                  <span> 138.4万</span>
                  <span> 1323</span>
               </div>
            </div>
            <div class="title">
               <p class="ellipsis-2">实现了课程代码看了没开空间即可健康科技就去玩儿拖与为哦屁以以以以以以看就看就看门</p>
            </div>

         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="https://ts1.cn.mm.bing.net/th/id/R-C.2feeaf1a4658fa470ddb04e6affca7e1?rik=6YtiVjqkb0C9hA&riu=http%3a%2f%2fpic8.58cdn.com.cn%2fp1%2fbig%2fn_v1bl2lwtiprh2fqtmtr4nq_4b902c3d9f8abab8.jpg&ehk=K7aJ7tE8P15YDR7%2fR%2bPCEA9MB6Vl%2fFOxCG5E8RgPdjE%3d&risl=&pid=ImgRaw&r=0" alt="">
               <div class="count">
                  <span> 138.4万</span>
                  <span> 1323</span>
               </div>
            </div>
            <div class="title">
               <p class="ellipsis-2">实现了课程代码看了没开空间即可健康科技就去玩儿拖与为哦屁以以以以以以看就看就看门</p>
            </div>

         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="https://b.zol-img.com.cn/soft/6/485/cecqQ9WB4lCHo.jpg" alt="">
               <div class="count">
                  <span> 138.4万</span>
                  <span> 1323</span>
               </div>
            </div>
            <div class="title">
               <p class="ellipsis-2">实现了课程代码看了没开空间即可健康科技就去玩儿拖与为哦屁以以以以以以看就看就看门</p>
            </div>

         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="https://b.zol-img.com.cn/soft/6/485/cecqQ9WB4lCHo.jpg" alt="">
               <div class="count">
                  <span> 138.4万</span>
                  <span> 1323</span>
               </div>
            </div>
            <div class="title">
               <p class="ellipsis-2">实现了课程代码看了没开空间即可健康科技就去玩儿拖与为哦屁以以以以以以看就看就看门</p>
            </div>

         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="https://b.zol-img.com.cn/soft/6/485/cecqQ9WB4lCHo.jpg" alt="">
               <div class="count">
                  <span> 138.4万</span>
                  <span> 1323</span>
               </div>
            </div>
            <div class="title">
               <p class="ellipsis-2">实现了课程代码看了没开空间即可健康科技就去玩儿拖与为哦屁以以以以以以看就看就看门</p>
            </div>

         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="https://b.zol-img.com.cn/soft/6/485/cecqQ9WB4lCHo.jpg" alt="">
               <div class="count">
                  <span> 138.4万</span>
                  <span> 1323</span>
               </div>
            </div>
            <div class="title">
               <p class="ellipsis-2">实现了课程代码看了没开空间即可健康科技就去玩儿拖与为哦屁以以以以以以看就看就看门</p>
            </div>
         </a>
         <a href="#" class="video-item">
            <div class="card">
               <img src="https://b.zol-img.com.cn/soft/6/485/cecqQ9WB4lCHo.jpg" alt="">
               <div class="count">
                  <span> 138.4万</span>
                  <span> 1323</span>
               </div>
            </div>
            <div class="title">
               <p class="ellipsis-2">实现了课程代码看了没开空间即可健康科技就去玩儿拖与为哦屁以以以以以以看就看就看门</p>
            </div>
         </a>
      </div>

      <a class="bottom">
         <span>打开App，看你感兴趣的视频</span>
      </a>
   </div>
</body>

</html>

@baseSize: 3.75vw;

.suspension {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;

    .m-navbar {
        padding: 0 (12 / @baseSize) 0 (18 / @baseSize);
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: (44 / @baseSize);

        .logo {
            img {
                width: (66 / @baseSize);
            }
        }

        .right {
            display: flex;

            .search {
                i {
                    color: #ccc;
                    font-family: 'icomoon';
                    font-size: (19 / @baseSize);
                }
            }

            .face {
                width: (24 / @baseSize);
                height: (24 / @baseSize);
                margin: 0 (20 / @baseSize);

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .app-btn {
                border-radius: 4px;
                width: (72 / @baseSize);
                height: (24 / @baseSize);
                background-color: rgb(246, 14, 172);

                span {

                    display: flex;
                    justify-content: center;
                    color: #fff;
                    font-size: (14 / @baseSize);
                }
            }
        }
    }
}

.channel-menu {
    display: flex;
    justify-content: space-between;
    height: (40 / @baseSize);
    background-color: #fff;
    border-bottom: 1px solid #e8e5e5;

    .tabs {
        overflow: hidden;
        flex: 1;
        position: relative;

        .tabs-list {
            display: flex;

            a {
                padding: 0 (16 / @baseSize);
                white-space: nowrap;
                font-size: (14 / @baseSize);
                line-height: (40 / @baseSize);
            }

            .line-red {
                width: (28 / @baseSize);
                height: (2 / @baseSize);
                background-color: #fb7299;
                position: absolute;
                left: (16 / @baseSize);
                bottom: 0;
            }
        }
    }

    .after {
        width: (40 / @baseSize);
        height: (39 / @baseSize);
        text-align: center;
        line-height: (40 / @baseSize);
        background-color: #fff;

        i {
            color: #ccc;
            font-family: 'icomoon';
            font-size: (19 / @baseSize);

        }
    }
}

.m-home {
    padding: (85 / @baseSize) (5 / @baseSize) 0;

    .bottom {
        height: (38 / @baseSize);
        width: (351 / @baseSize);
        position: fixed;
        background-color: #fb7299;
        bottom: (20 / @baseSize);
        left: auto;
        border-radius: ((37 / 2) / @baseSize);
        text-align: center;
        line-height: (38 / @baseSize);

        span {
            color: #fff;
            font-size: (12 / @baseSize);
        }
    }

    .video-list {
        display: flex;
        flex-wrap: wrap;

        .video-item {
            width: 50%;
            padding: (8 / @baseSize) (5 / @baseSize);


            .title {
                width: 100%;
                height: (42 / @baseSize);
                margin-top: (5 / @baseSize);

                .ellipsis-2 {

                    font-size: (12 / @baseSize);
                }

            }

            .card {
                position: relative;
                height: (97 / @baseSize);
                width: 100%;

                img {
                    height: 100%;
                    width: 100%;
                }

                .count {
                    position: absolute;
                    height: (27 / @baseSize);
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    padding: (5 / @baseSize);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    background-image: linear-gradient(transparent, rgb(55, 54, 54));

                    span {
                        font-size: (12 / @baseSize);
                        font-family: 'icomoon';
                        color: #fff;
                    }
                }
            }
        }
    }
}

效果：