移动适配vw/vh方法—vw/vh实例—模拟B站手机端首页—获取样式教程视频

小琳爱分享

已于 2022-07-29 19:41:30 修改

阅读量1k

点赞数

分类专栏：移动Web 文章标签： css css3 html

于 2022-07-28 18:48:11 首次发布

本文链接：https://blog.csdn.net/qq_45708377/article/details/126041161

版权

目标：能够使用vw单位设置网页元素的尺寸
相对对于视口的尺寸计算结果
vw/vh方法也使用到less语法,可以查看上篇文章
https://blog.csdn.net/qq_45708377/article/details/125996895

在这里插入图片描述

一.计算逻辑

以vw为例

在这里插入图片描述

以vh为例：

二.常规使用

H5代码块

<!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>vw适配</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <div class="box"></div>

    <div class="box2"></div>
</body>
</html>

Less代码块

// less变到css不到系统中设置的文件夹，具体看上一篇文章移动适配rem中less语法
// out: ./
* {
    margin: 0;
    padding: 0;
}

// 68 * 29  -- vw
.box {
    width: (68 / 3.75vw);
    height: (29 / 3.75vw);
    background-color: pink;
}

.box2 {
    // vh
    width: (68 / 6.67vh);
    height: (29 / 6.67vh);
    background-color: green;
}

在这里插入图片描述
并且使用vw和vh得出的图形长宽是相同的。

三.注意

不要混用。
在这里插入图片描述

vw/vh实例—模拟B站手机端首页
在这里插入图片描述
该代码在less使用的自定义变量

@vw : 3.75vw;
@color:#fb7299;

四.获取样式教程视频

https://live.csdn.net/v/228189

实例：模拟B站手机端首页

1.主要难点

1.less语法中的变量，要好好使用
2.固定模块的 position: fixed; 固定定位，和 z-index: 999;保证模块在页面最顶端，不被压住。
3.注意position: fixed; 固定定位后该区域属于脱标状态，如果想要下面的正常显示，需要给下面的区域加足够的padding-top，要保证padding-top的高度大于顶上高度。

在这里插入图片描述
4.下面的视频区域使用display: flex;如果视频数量过多会挤压在一行，需要使用 // flex的换行语句 flex-wrap: wrap; 进行换行。
5.注意a标签的使用，大部分点击都是要跳转的。
6.注意宽度，该撑开的一定要用width:100%撑开，尤其是用到 display:flex;justify-content:space-between;时。

2.顶部栏

分上下两部分，且每个部分分左右模块，可以使用 display:flex;
justify-content: space-between;
在这里插入图片描述

头部的h5代码块

    <!-- 头部 -->
    <header>
        <div class="top">
            <div class="left">
                <a href="#">
                    <i class="iconfont Navbar_logo"></i>
                </a>
            </div>
            <div cl