Web前端—移动Web第四天（vw适配方案、vw和vh的基本使用、综合案例-酷我音乐）

news2025/1/18 20:24:01

版本说明

当前版本号[20231122]。

版本修改说明
20231122初版

目录

文章目录

  • 版本说明
  • 目录
  • 移动 Web 第四天
    • 01-vw适配方案
      • vw和vh基本使用
      • vw布局
      • vh布局
      • 混用问题
    • 02-综合案例-酷我音乐
      • 准备工作
      • 头部布局
      • 头部内容
      • 搜索区域
      • banner 区域
      • 标题公共样式
      • 排行榜内容
      • 推荐歌单布局
      • 推荐歌单内容
      • 下载区域
      • 头部固定

移动 Web 第四天

01-vw适配方案

vw和vh基本使用

vw和vh是相对单位，相对视口尺寸计算结果，可以直接实现移动端适配效果。

  • vw：viewport width（1vw = 1/100视口宽度 ）
  • vh：lviewport height ( 1vh = 1/100视口高度 )

vw布局

vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )

  1. 确定设计稿对应的vw尺寸 （1/100视口宽度）

    1. 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定 vw 尺寸 （1/100 视口宽度

  2. vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )

vh布局

  1. 确定设计稿对应的vh尺寸 （1/100视口高度）

    1. 查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定 vh 尺寸 （1/100 视口高度）

  2. vh单位的尺寸 = px 单位数值 / ( 1/100 视口高度 )

混用问题

注：是否可以 vw 和 vh 混用呢？

vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形

02-综合案例-酷我音乐

1682666610217

准备工作

1682666716132

  • HTML 结构
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/index.css">

  • less 样式

    要注意：// out: ../css/要在第一行，才会生效。如果放到非第一行去， css 文件就会与 less文件放在一起。

// out: ../css/

@import "./base";

image-20231120160953143

头部布局

  • HTML 结构
<!-- 头部 -->
<header>
  <div class="left">left</div>
  <a href="#">下载APP</a>
</header>
  • less 样式
body {
  background-color: #f9fafb;
}

@vw:3.75vw;

// 头部
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 (15 / @vw);
  height: (50 / @vw);
  background-color: #fff;
}

1、把头部区域圈出来。

<body>
    <!-- 头部 -->
    <header>1</header>
</body>

body{
    background-color: #f9fafb;
}

// 头部
header{
    background-color: #fff;
}

image-20231120161925102

2、给头部区域加上内外边距。

@vw:3.75vw;
// 头部
header{
    padding: 0 (15 / @vw);
    height: (50 / @vw);
    background-color: #fff;
}

image-20231120162214285

3、分成左右两部分，并设置Flex容器中项目的垂直对齐方式。

<!-- 头部 -->
    <header>
        <div class="left">left</div>
        <a href="#">下载APP</a>
    </header>

@vw:3.75vw;
// 头部
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 (15 / @vw);
    height: (50 / @vw);
    background-color: #fff;
}

image-20231120163150065

头部内容

  • less 样式
header {
  // 左边
  .left {
    width: (235 / @vw);
    height: (50 / @vw);
    background-image: url(../assets/head.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
  a {
    width: (80 / @vw);
    height: (30 / @vw);
    background-color: #ffe31b;
    border-radius: (15 / @vw);
    text-align: center;
    line-height: (30 / @vw);
    font-size: (14 / @vw);
  }
}

1、添加上背景图片，并设置背景图像的尺寸和重复方式。

  • 背景图像会保持其原始尺寸，同时可能被拉伸或压缩以适应容器的大小。
  • 设置为 no-repeat 时，背景图像不会在水平方向上重复，也不会在垂直方向上重复。这意味着背景图像只会显示一次，并且不会随着容器的大小变化而自动调整。
// 左边
    .left{
        height: (50 / @vw);
        width: (235 / @vw);
        background-image: url(../assets/head.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

image-20231120163845274

2、设置“下载APP”的背景框，让文本会在水平方向上居中对齐。

 // 右边
    a{
        width: (80 / @vw);
        height: (30 / @vw);
        background-color: #ffe31b;
        text-align: center;
        line-height: (30 / @vw);
        border-radius: (15 / @vw);
        font-size: (14 / @vw);
    }

image-20231120164646571

搜索区域

  • HTML 结构
<!-- 搜索 -->
<div class="search">
  <div class="txt">
    <span class="iconfont icon-sousuo"></span>
    <span>搜索你想听的歌曲</span>
  </div>
</div>
  • less 样式
// 搜索
.search {
  padding: (10 / @vw) (15 / @vw);
  height: (52 / @vw);
  // background-color: pink;
  .txt {
    height: (32 / @vw);
    background-color: #f2f4f5;
    border-radius: (16 / @vw);
    text-align: center;
    line-height: (32 / @vw);
    color: #a1a4b3;
    font-size: (14 / @vw);
    .iconfont {
      font-size: (16 / @vw);
    }
  }
}

1、列出搜索区域。

// 搜索区域
.search{
    padding: (10 / @vw) (15 / @vw);
    height: (42 / @vw);
    background-color: pink;
}

image-20231120165119660

2、对文本的区域设置边距。

 .txt{
        height: (32 / @vw);
        background-color: #f2f4f5;
        border-radius: (16 / @vw);
    }

image-20231120165729043

3、在框内添加字体图标和搜索提示词。

<!-- 搜索区域 -->
    <div class="search">
        <div class="txt">
            <span class="iconfont icon-sousuo"></span>
            <span>搜索你想听的歌曲</span>
        </div>
    </div>

.txt{
        height: (32 / @vw);
        background-color: #f2f4f5;
        border-radius: (16 / @vw);
        text-align: center;
        line-height: (32 / @vw);
        color: #a1a4b3;
    }

image-20231120170258808

4、设置字体图标的大小。

.txt{
        height: (32 / @vw);
        background-color: #f2f4f5;
        border-radius: (16 / @vw);
        text-align: center;
        line-height: (32 / @vw);
        color: #a1a4b3;
        font-size: (14 / @vw);

        .iconfont{
            font-size: (16 / @vw);
        }
    }

image-20231120170527597

banner 区域

  • HTML 结构
<!-- banner -->
<div class="banner">
  <ul>
    <li><a href="#"><img src="./assets/banner01.jpeg" alt=""></a></li>
  </ul>
</div>
  • less 样式
// banner
.banner {
  padding: 0 (15 / @vw);
  height: (108 / @vw);
  // background-color: pink;
  ul {
    li {
      width: (345 / @vw);
      height: (108 / @vw);
      img {
        width: 100%;
        height: 100%;
        // cover完全覆盖
        // 缩放img，图片比例跟父级盒子比例不同，避免图片挤压变形
        object-fit: cover;
        border-radius: (5 / @vw);
      }
    }
  }
}

1、给banner区域腾出位置。

 <!-- banner区域 -->
    <div class="banner">1</div>

// banner区域
.banner{
    padding: 0 (15 / @vw);
    height: (108 / @vw);
    background-color: pink;
}

image-20231121084335122

2、插入图片，并且让图片完全覆盖，当图片比例与父级盒子比例不同时，就缩放img，避免图片因挤压而产生变形。

<!-- banner区域 -->
    <div class="banner">
        <ul>
            <li><a href="#"><img src="./assets/banner01.jpeg" alt=""></a></li>
        </ul>
    </div>

// banner区域
.banner{
    padding: 0 (15 / @vw);
    height: (108 / @vw);
    background-color: pink;

    ul{
        li{
            width: (345 / @vw);
            height: (108 / @vw);

            img{
                width: 100%;
                height: 100%;
                // cover代表图片是完全覆盖的
		// 当图片比例与父级盒子比例不同时，缩放img，避免图片挤压变形
                object-fit: cover;
            }
        }
    }
}

image-20231121085107216

注：

  // cover代表图片是完全覆盖的
		// 当图片比例与父级盒子比例不同时，缩放img，避免图片挤压变形
                object-fit: cover;

3、再把背景色去掉。

 border-radius: (5 / @vw);

image-20231121085352579

标题公共样式

  • HTML 结构
<!-- 排行榜 -->
<div class="list">
  <!-- 标题 -->
  <div class="title">
    <h4>酷我排行榜</h4>
    <a href="#">更多<span class="iconfont icon-right"></span></a>
  </div>
</div>
  • less 样式
// 排行榜
.list {
  margin-top: (20 / @vw);
  padding: 0 (15 / @vw);
}

// 标题 → 公共样式
.title {
  display: flex;
  justify-content: space-between;
  margin-bottom: (16 / @vw);
  line-height: (25 / @vw);
  h4 {
    font-size: (20 / @vw);
  }
  a {
    font-size: (12 / @vw);
    color: #a1a4b3;
  }
}

1、对 排行榜 区域进行设置。

 <!-- 排行榜 -->
    <div class="list">
        <!-- 标题 -->
        <div class="title">
            <h4>酷我排行榜</h4>
            <a href="#">更多<span class="iconfont icon-right"></span></a>
        </div>
    </div>

// 排行榜
.list{
    margin-top: (20 / @vw);
    padding: 0 (15 / @vw);
}

image-20231121090150160

2、设置排行榜标题区域为水平对齐方式。元素之间会平均分配空间，并且两端的元素分别靠近容器的开始和结束位置。

// 标题
.title{
    display: flex;
    justify-content: space-between;
    margin-bottom: (16 / @vw);
}

image-20231121090427131

3、改变文字的样式。

// 标题
.title{
    display: flex;
    justify-content: space-between;
    margin-bottom: (16 / @vw);
    line-height: (25 / @vw);

    h4{
        font-size: 20px;
    }

    a{
        font-size: 12px;
        color: #a1a4b3;
        text-align: center;
    }
}

image-20231121091429983

排行榜内容

  • HTML 结构
<!-- 内容 -->
<div class="content">
  <ul>
    <li>
      <div class="pic"><img src="./assets/icon_rank_hot.png" alt=""></div>
      <div class="txt">
        <a href="#" class="more">酷我热歌榜<span class="iconfont icon-right"></span></a>
        <a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
        <a href="#">2.就让这大雨全都落下 - 容祖儿</a>
        <a href="#">3.缺氧 - 轩姨（相信光）</a>
      </div>
    </li>
    <li>
      <div class="pic"><img src="./assets/icon_rank_new.png" alt=""></div>
      <div class="txt">
        <a href="#" class="more">酷我新歌榜<span class="iconfont icon-right"></span></a>
        <a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
        <a href="#">2.就让这大雨全都落下 - 容祖儿</a>
        <a href="#">3.缺氧 - 轩姨（相信光）</a>
      </div>
    </li>
    <li>
      <div class="pic"><img src="./assets/icon_rank_rise.png" alt=""></div>
      <div class="txt">
        <a href="#" class="more">酷我飙升榜<span class="iconfont icon-right"></span></a>
        <a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
        <a href="#">2.就让这大雨全都落下 - 容祖儿</a>
        <a href="#">3.缺氧 - 轩姨（相信光）</a>
      </div>
    </li>
  </ul>
</div>
  • less 样式
// 排行榜
.list {
  margin-top: (20 / @vw);
  padding: 0 (15 / @vw);
  li {
    display: flex;
    margin-bottom: (16 / @vw);
    height: (105 / @vw);
    background-color: #fff;
    border-radius: (10 / @vw);
    .pic {
      margin-right: (20 / @vw);
      img {
        width: (105 / @vw);
        height: (105 / @vw);
        border-radius: (10 / @vw);
      }
    }
    .txt {
      a {
        display: block;
        font-size: (12 / @vw);
        color: #a1a4b3;
        line-height: 1.8;
      }

      .more {
        font-size: (14 / @vw);
        color: #333;
        .iconfont {
          font-size: (16 / @vw);
        }
      }
    }
  }
}

1、设置三个li标签。

 <!-- 排行榜 -->
    <div class="list">
        <!-- 标题 -->
        <div class="title">
            <h4>酷我排行榜</h4>
            <a href="#">更多<span class="iconfont icon-right"></span></a>
        </div>

        <!-- 内容 -->
        <div class="content">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>

// 排行榜
.list{
    margin-top: (20 / @vw);
    padding: 0 (15 / @vw);

    li{
        margin-bottom: (16 / @vw);
        height: (105 / @vw);
        background-color: #fff;
        border-radius: (10 / @vw);
    }
}

image-20231121094048141

2、将每个li标签分为两部分，图片及文字。

<li>
                    <div class="pic">1</div>
                    <div class="txt">2</div>
                </li>

li{
        display: flex;
        margin-bottom: (16 / @vw);
        height: (105 / @vw);
        background-color: #fff;
        border-radius: (10 / @vw);

        .pic{
            margin-right: (20 / @vw);
        }
    }

image-20231121094357773

3、插入图片。

<li>
                    <div class="pic">
                        <img src="./assets/icon_rank_hot.png" alt="">
                    </div>
                    <div class="txt">2</div>
                </li>

 .pic{
            margin-right: (20 / @vw);

            img{
                width: (105 / @vw);
                height: (105 / @vw);
                border-radius: (10 / @vw);
            }
        }

image-20231121094656120

4、将文字区域设置成 display: block; ，是为了让每个 a 标签都可以换行。

<li>
                    <div class="pic">
                        <img src="./assets/icon_rank_hot.png" alt="">
                    </div>
                    <div class="txt">
                        <a href="#" class="more">酷我热歌榜<span class="iconfont icon-right"></span></a>
                        <a href="#">1.樱花树下的约定（完整版） - 旺仔小乔</a>
                        <a href="#">2.就让这大雨全都落下 - 容祖儿</a>
                        <a href="#">3.缺氧 - 轩姨（相信光）</a>
                    </div>
                </li>

.txt{
           a{
            display: block;
           }
        }

image-20231121095258016

5、改变右边区域的样式。

.txt{
           a{
            display: block;
            line-height: 1.8;
            font-size: (12 / @vw);
            color: #a1a4b3;
           }

           .more{
            font-size: (14 / @vw);
            color: #333;

            .iconfont{
                font-size: (16 / @vw);
            }
           }
        }

image-20231121100100249

推荐歌单布局

  • HTML 结构
<!-- 推荐歌单 -->
<div class="recommend">
  <!-- 标题 -->
  <div class="title">
    <h4>推荐歌单</h4>
    <a href="#">更多<span class="iconfont icon-right"></span></a>
  </div>
  <!-- 内容 -->
  <div class="content">
    <ul>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
    </ul>
  </div>
</div>
  • less 样式
// 推荐歌单
.recommend {
  padding: 0 (15 / @vw);
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      margin-bottom: (16 / @vw);
      width: (105 / @vw);
      height: (143 / @vw);
      background-color: pink;
    }
  }
}

1、设置歌单区域的内边距。

<!-- 推荐歌单 -->
        <div class="recommend">1</div>

// 推荐歌单
.recommend{
    padding: 0 (15 / @vw);
}

image-20231121102207639

2、按照之前设置标题的套路，在这里继续使用。

<!-- 推荐歌单 -->
    <div class="recommend">
        <!-- 标题 -->
        <div class="title">
            <h4>推荐歌单</h4>
            <a href="#">更多<span class="iconfont icon-right"></span></a>
        </div>
    </div>

image-20231121102651376

3、分6个li标签，当容器宽度不足以容纳所有元素时，元素自动换行并均匀分布，同时保持两端元素靠边的效果。

<!-- 推荐歌单 -->
    <div class="recommend">

        <!-- 标题 -->
        <div class="title">
            <h4>推荐歌单</h4>
            <a href="#">更多<span class="iconfont icon-right"></span></a>
        </div>

        <!-- 内容 -->
        <div class="content">
            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        </div>
        
    </div>

// 推荐歌单
.recommend{
    padding: 0 (15 / @vw);

    ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li{
            width: (105 / @vw);
            height: (143 / @vw);
            margin-bottom: (16 / @vw);
            background-color: pink;
        }
    }
}

image-20231121103416777

推荐歌单内容

  • HTML 结构
<li>
  <div class="pic">
    <img src="./assets/song01.jpeg" alt="">
    <div class="cover">18.2W</div>
  </div>
  <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
</li>
<li>
  <div class="pic">
    <img src="./assets/song02.jpeg" alt="">
    <div class="cover">18.2W</div>
  </div>
  <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
</li>
<li>
  <div class="pic">
    <img src="./assets/song03.jpeg" alt="">
    <div class="cover">18.2W</div>
  </div>
  <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
</li>
<li>
  <div class="pic">
    <img src="./assets/song02.jpeg" alt="">
    <div class="cover">18.2W</div>
  </div>
  <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
</li>
<li>
  <div class="pic">
    <img src="./assets/song03.jpeg" alt="">
    <div class="cover">18.2W</div>
  </div>
  <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
</li>
<li>
  <div class="pic">
    <img src="./assets/song01.jpeg" alt="">
    <div class="cover">18.2W</div>
  </div>
  <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
</li>
  • less 样式
// 图片
.pic {
  position: relative;
  width: (105 / @vw);
  height: (105 / @vw);
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: (10 / @vw);
  }
  .cover {
    position: absolute;
    left: 0;
    bottom: 0;
    width: (70 / @vw);
    height: (28 / @vw);
    background-color: rgba(0,0,0,0.8);
    border-radius: 0 (10 / @vw) 0 (10 / @vw);
    text-align: center;
    line-height: (28 / @vw);
    color: #fff;
    font-size: (14 / @vw);
  }
}
// 文字
.txt {
  font-size: (14 / @vw);
}

1、给每个li标签添加图片及文字。

 <li>
                    <div class="pic"><img src="./assets/song01.jpeg" alt=""></div>
                    <div class="txt">抖音嗨爆DJ！劲爆旋律萦绕双耳</div>
                </li>

 li{
            width: (105 / @vw);
            height: (143 / @vw);
            margin-bottom: (16 / @vw);
            background-color: pink;

            // 图片
            .pic{
                width: (105 / @vw);
                height: (105 / @vw);
                
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }

image-20231121104104301

2、改变文字大小并把底色注销掉。

// 文字
            .txt{
                font-size: (14 / @vw);
            }

image-20231121104450496

3、插入左下角的表数值的框。

<div class="cover">18.2W</div>

// 图片
            .pic{
                position: relative;
                width: (105 / @vw);
                height: (105 / @vw);
                
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: (10 / @vw);
                }

                .cover{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                }
            }

image-20231121105012958

4、改变背景透明度及圆角显示。

 .cover{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: (70 / @vw);
                    height: (28 / @vw);
                    background-color: rgba(0, 0, 0, 0.8);
                    border-radius: 0 (10 / @vw) 0 (10 / @vw);
                }

image-20231121105328710

5、设置里面的数字位置水平及垂直居中。

// 里面的数字
                    text-align: center;
                    line-height: (28 / @vw);
                    color: #fff;

image-20231121105550166

下载区域

  • HTML 结构
<!-- 安装，下载 -->
<div class="download">
  <img src="./assets/logo.png" alt="">
  <p>安装酷我音乐 发现更多好音乐</p>
  <span class="iconfont icon-right"></span>
</div>
  • less 样式
// 下载
.download {
  position: fixed;
  left: (15 / @vw);
  bottom: (30 / @vw);

  display: flex;
  align-items: center;
  padding: 0 (10 / @vw) 0 (15 / @vw);
  width: (345 / @vw);
  height: (45 / @vw);
  background-color: #fff;
  border-radius: (22 / @vw);
  img {
    margin-right: (10 / @vw);
    width: (36 / @vw);
    height: (36 / @vw);
  }
  p {
    flex: 1;
    font-size: (14 / @vw);
  }
  span {
    width: (32 / @vw);
    height: (32 / @vw);
    background-color: #f2f3f5;
    border-radius: 50%;
    text-align: center;
    line-height: (32 / @vw);
    font-size: (16 / @vw);
  }
}

1、给下载区域描出框的位置。

<!-- 下载区域 -->
    <div class="download">1</div>

// 下载区域
.download{
    width: (345 / @vw);
    height: (45 / @vw);
    padding: 0 (10 / @vw) 0 (15 / @vw);
    color: #333;
}

image-20231121110346844

2、进一步修改细节。

// 下载区域
.download{
    position: fixed;
    left: (15 / @vw);
    bottom: (30 / @vw);
    width: (345 / @vw);
    height: (45 / @vw);
    padding: 0 (10 / @vw) 0 (15 / @vw);
    color: #fff;
}

image-20231121110726950

3、设置元素的边框圆角半径。

background-color: #fff;
border-radius: (22 / @vw);

image-20231121112026637

4、将区域中的图片、文字和字体图标加上去。

 <!-- 下载区域 -->
    <div class="download">
        <img src="./assets/logo.png" alt="">
        <p>安装酷我音乐 发现更多好音乐</p>
        <span class="iconfont icon-right"></span>
    </div>

.download{
    display: flex;
    ……
        img{
            width: (36 / @vw);
            height: (36 / @vw);
        }
}

image-20231121112557315

5、设置区域中的内容垂直对齐。

// 下载区域
.download{
    ……
    align-items: center;

    img{
        width: (36 / @vw);
        height: (36 / @vw);
        margin: 0 (10 / @vw) 0 0;
    }
}

image-20231121113354145

6、修改文字的大小。flex: 1;为设置Flex容器中项目的弹性伸缩比例。当设置为 1 时，项目会平均分配可用空间。在这里当分配好图标和字体图标完后，剩下的空间均为 p 所用。

p{
        flex: 1;
        font-size: (14 / @vw);
    }

image-20231121113609715

7、设置"span"的元素样式为一个圆形的容器，并具有指定的宽度、高度、背景颜色、边框圆角半径、行高和文本对齐方式。

span{
        width: (32 / @vw);
        height: (32 / @vw);
        background-color: #f2f3f5;
        border-radius: 50%;
        line-height: (32 / @vw);
        text-align: center;
    }

image-20231121114022736

头部固定

问题：

1、宽度不够

2、搜索栏没了

  • less 样式
// 头部
header {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 (15 / @vw);
  // 固定定位的盒子，宽度靠内容撑开，希望宽度100%
  width: 100%;
  height: (50 / @vw);
  background-color: #fff;
}

// 搜索
.search {
  // 头部固定定位，脱标不占位，搜索去最顶了，加上外边距挤下来即可
  margin-top: (50 / @vw);
  padding: (10 / @vw) (15 / @vw);
  height: (52 / @vw);
}

1、设置头部固定。

header{
    position: fixed;
    left: 0;
    top: 0;
    // 固定定位的盒子，宽度靠内容撑开，所以我们希望宽度为100%
    width: 100%;
    ……
}

image-20231121115214543

2、我们会发现，搜索框没有显示出来了，是因为固定头部的区域把其给覆盖了。我们只需要添加上边距，让搜索框下来，这样我们就能看到了。

// 搜索区域
.search{
    // 头部固定定位，拖标不定位，搜索去最顶处了，加上外边距挤下来即可
    margin-top: (50 / @vw);
    ……
}

image-20231121115513531

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1239212.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

生活如果真能像队列一样的话

生活如果真能像队列一样的话

生活如果真能像队列一样&#xff0c;那该多好啊。 —————————————————————————————————————————— 背包&#xff0c;队列 可以先看他们的API&#xff1a;都含有一个无参构造函数&#xff0c;添加单个元素的方法&#xff0c;测试集合…
阅读更多...
自动化测试 —— 元素定位

自动化测试 —— 元素定位

1.什么是自动化测试 自动化测试的概念:软件自动化测试就是通过测试工具或者其他手段&#xff0c;按照测试人员的预定计划对软件产品进行自动化测试&#xff0c;他是软件测试的一个重要组成部分&#xff0c;能够完成许多手工测试无法完成或者难以实现的测试工作&#xff0c;正确…
阅读更多...
带记忆的超级GPT智能体，能做饭、煮咖啡、整理家务！

带记忆的超级GPT智能体，能做饭、煮咖啡、整理家务！

随着AI技术的快速迭代&#xff0c;Alexa、Siri、小度、天猫精灵等语音助手得到了广泛应用。但在自然语言理解和完成复杂任务方面仍然有限。 相比文本的标准格式&#xff0c;语音充满复杂性和多样性&#xff08;例如&#xff0c;地方话&#xff09;,传统方法很难适应不同用户的…
阅读更多...
【C++初阶】STL详解（五）List的介绍与使用

【C++初阶】STL详解（五）List的介绍与使用

本专栏内容为&#xff1a;C学习专栏&#xff0c;分为初阶和进阶两部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握C。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;C &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库&…
阅读更多...
盖雅绩效应用通过SAP认证并斩获创新方案奖

盖雅绩效应用通过SAP认证并斩获创新方案奖

近日&#xff0c;在「不啻微芒 造炬成阳」为主题的SAP合作伙伴创新大赛上&#xff0c;盖雅工场「G移动绩效创新方案」荣获创新解决方案奖。该方案核心是一款基于SAP SuccessFactors套件及SAP BTP平台的扩展应用&#xff0c;主要针对一线人员绩效管理场景&#xff0c;借助简洁的…
阅读更多...
[autojs]autojs开关按钮的简单使用

[autojs]autojs开关按钮的简单使用

"ui"; ui.layout(<vertical><Switch id"autoService" text"无障碍服务"checked"false"textSize"15sp"/><button text"第二个按钮"/></vertical> ); ui.autoService.on("check"…
阅读更多...
小微初创企业，如何利用媒体宣传快速成长

小微初创企业，如何利用媒体宣传快速成长

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 对于小微初创企业来说&#xff0c;利用媒体宣传可以快速提升品牌知名度、扩大影响力&#xff0c;进而促进企业的成长。 1.确定宣传目标&#xff1a;是增加销售、提升品牌知名度、还是推…
阅读更多...
Less精简直接上手,纯干货教程

Less精简直接上手,纯干货教程

目录 介绍 安装插件 入门使用测试 ​编辑 less变量 介绍 less作为一门CSS扩展语言&#xff0c;也就是说CSS预处理器。&#xff08;Leaner Style Sheets&#xff09;简称less&#xff0c;它只不过是为css新增这些的功能&#xff0c;比如说&#xff1a;变量、函数、作用域等等…
阅读更多...
利用Python进行数据分析【送书第六期：文末送书】

利用Python进行数据分析【送书第六期：文末送书】

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…
阅读更多...
Unity中Shader双向反射分布函数BRDF

Unity中Shader双向反射分布函数BRDF

文章目录 前言一、渲染方程二、什么是BxDF1、BSSRDF2、BRDF3、BTDF4、BSDF 三、迪士尼原则的BRDF四、迪士尼原则的BRDF的参数五、在Unity中看一下默认Shader的这些参数六、在这里记录一下使用 Blender 和 SubstancePainter 的流程1、在Blender中导出模型为 .obj 格式2、在Subst…
阅读更多...
虚拟机VMware+Ubuntu系统的自定义安装教程（详细图文教程）

虚拟机VMware+Ubuntu系统的自定义安装教程（详细图文教程）

VMware可以帮助你在一个操作系统的环境下安装和运行另一个操作系统&#xff0c;从而提高IT效率&#xff0c;降低运维成本&#xff0c;加快工作负载部署速度&#xff0c;提高应用性能&#xff0c;提高服务器可用性&#xff0c;消除服务器数量剧增情况和复杂性。 目录 一、VMwar…
阅读更多...
『亚马逊云科技产品测评』活动征文｜AWS 存储产品类别及其适用场景详细说明

『亚马逊云科技产品测评』活动征文｜AWS 存储产品类别及其适用场景详细说明

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 目录 前言、AWS 存储产品类别 1、Amazon Elastic Block Store (EBS) …
阅读更多...
Java操作excel之poi

Java操作excel之poi

1. 创建Excel 1.1 创建新Excel工作簿 引入poi依赖 <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</ar…
阅读更多...
AI原生应用为百度带来新增量

AI原生应用为百度带来新增量

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; AI将彻底改变每一个行业!得益于AI和基础模型的驱动&#xff0c;百度在AI原生应用领域厚积薄发。 11月21日&#xff0c;百度Q3财报发布&#xff0c;数据显示&#xff1a;三季度营收达344.47亿元&…
阅读更多...
Verilog开源项目——百兆以太网交换机（三）Hash模块设计

Verilog开源项目——百兆以太网交换机（三）Hash模块设计

Verilog开源项目——百兆以太网交换机&#xff08;三&#xff09;Hash模块设计 &#x1f508;声明&#xff1a;未经作者允许&#xff0c;禁止转载 &#x1f603;博主主页&#xff1a;王_嘻嘻的CSDN主页 &#x1f511;全新原创以太网交换机项目&#xff0c;Blog内容将聚焦整体架…
阅读更多...
福州大学《嵌入式系统综合设计》实验三：多媒体开发基础编程

福州大学《嵌入式系统综合设计》实验三：多媒体开发基础编程

一、实验目的 本实验基于搭建好的开发环境和硬件环境&#xff0c;通过编写简单的通信实验&#xff0c;验证开发环境&#xff0c;掌握多媒体开发编程基础&#xff0c;包括SOCKET编程、多线程编程和线程同步知识。 二、实验内容 基于套接字、多线程、同步锁机制实现多媒体文件…
阅读更多...
经典中的经典之字符串

经典中的经典之字符串

前言&#xff1a;前段时间发烧了&#xff0c;所以耽误了很多事情&#xff0c;一直没有更新&#xff0c;多穿点衣服&#xff0c;感冒不好受。 接下来有时间就会陆续更新一些基础的算法题&#xff0c;题目都很经典&#xff0c;大家可以先尝试着做&#xff0c;再看 解析。 第一…
阅读更多...
Live800：企业提升客户互动体验，有哪些关键因素？

Live800：企业提升客户互动体验，有哪些关键因素？

如今&#xff0c;随着信息时代的不断发展&#xff0c;企业已经不再是单向的商业机构&#xff0c;他们需要与客户进行及时的沟通与反馈&#xff0c;从而更好地提升客户互动体验&#xff0c;达到营销和用户体验的双赢局面。那么&#xff0c;企业如何提升客户互动体验呢&#xff1…
阅读更多...
从Github登录的双因子验证到基于时间戳的一次性密码：2FA、OTP与TOTP

从Github登录的双因子验证到基于时间戳的一次性密码：2FA、OTP与TOTP

Github于2023-03-09推出一项提高软件安全标准的措施&#xff0c;所有在Github上贡献过代码的开发人员在年底前必须完成 2FA&#xff08;Two-factory authentication&#xff0c;双因子认证&#xff09;。初听此事之时&#xff0c;不以为意&#xff0c;因为自己之前就知道双因子…
阅读更多...
java创建指定分辨率的图片或修改图片的分辨率(DPI)

java创建指定分辨率的图片或修改图片的分辨率(DPI)

因为java默认的图片像素分辨率DPI72&#xff0c;分辨率有点低。所以研究了一下如何创建指定DPI的方案。 DPI&#xff1a; 指的是每英尺的像素点(dots per inch) JPEG图片 JPEG图片的元数据定义参看oracle官网。 https://docs.oracle.com/javase/8/docs/api/javax/imageio/me…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023