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

版本说明

当前版本号[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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

rsync配置和守护进程实践

rsync配置和守护进程实践

目录 一、rsync概念 1.rsync简介 2.rsync特点 3、增量和全局传输 二、Rsync工作方式 1.准备好rsync备份服务器 2.本地的数据传输模式 3.远程的数据传输模式 4.rsync数据推拉模式 三、实践 1.准备三台虚拟机 2.都安装rsync服务 3.拉取远程文件 3.推送文件 4.rsyn…
阅读更多...
使用云 SIEM 解决方案保护IT 基础设施

使用云 SIEM 解决方案保护IT 基础设施

什么是云 SIEM 基于云的 SIEM 解决方案将 SIEM 功能作为服务提供&#xff0c;云 SIEM 解决方案可保护您的网络;提供威胁情报&#xff0c;提供用于检测、优先处理和解决安全事件的控制台&#xff0c;并帮助您遵守法规要求。云 SIEM 解决方案在管理本地和云环境的网络安全时提供…
阅读更多...
java.lang.ArrayIndexOutOfBoundsException: （数组越界异常）

java.lang.ArrayIndexOutOfBoundsException: （数组越界异常）

java.lang.ArrayIndexOutOfBoundsException: &#xff08;数组越界异常&#xff09; 如何解决数组越界异常&#xff1f;1.1条件判断1.2循环结构1.3 try-catch&#xff08;异常捕获&#xff09;避免数组越界异常的方法&#xff1a;数组越界异常的调试和排查技巧&#xff1a; 当我…
阅读更多...
RAAGR2-Net：一种使用多个空间帧的并行处理的脑肿瘤分割网络

RAAGR2-Net：一种使用多个空间帧的并行处理的脑肿瘤分割网络

RAAGR2-Net: A brain tumor segmentation network using parallel processing of multiple spatial frames RAAGR2-Net&#xff1a;一种使用多个空间帧的并行处理的脑肿瘤分割网络背景贡献实验N4 bias-field-correction 数据预处理Z-score and re-sampling Z-score归一化&#…
阅读更多...
给定一个非严格递增排列的有序数组，删除数组中的重复项

给定一个非严格递增排列的有序数组，删除数组中的重复项

实例要求&#xff1a;1、给定一个非严格递增排列的有序数组 nums &#xff1b;2、原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff1b;3、返回删除后数组的新长度&#xff1b;4、元素的 相对顺序 应该保持 一致 &#xff1b;5、然后返回 nums 中唯一元素的…
阅读更多...
C++一个关于delete的幼稚错误

C++一个关于delete的幼稚错误

分析 在项目开发中&#xff0c;遇上这么一个错误&#xff1a; 0xc00000fd stack_overflow 这是一个栈溢出的错误&#xff0c;奇怪&#xff0c;我delete怎么会提示这么一个错误呢&#xff1f; 与是问题了群&#xff1a; 总结 这个错误实在是蠢啊&#xff01; 没有细想&am…
阅读更多...
含分布式电源的配电网可靠性评估（matlab代码）

含分布式电源的配电网可靠性评估（matlab代码）

1主要内容 该程序参考《基于仿射最小路法的含分布式电源配电网可靠性分析》文献方法&#xff0c;通过概率模型和时序模型分别进行建模&#xff0c;实现基于概率模型最小路法的含分布式电源配电网可靠性评估以及时序模型序贯蒙特卡洛模拟法的含分布式电源配电网可靠性评估。程序…
阅读更多...
centos 安装k8s教程（一键安装k8s）

centos 安装k8s教程（一键安装k8s）

第一步 准备几台机器 第二步 K8s Manager 服务器中添加docker支持 安装教程请查看这个博客 docker 安装详细教程 点我 第三步安装 KuboardSpray 教程在这里 第四步 下载k8s资源包 第五步 安装k8s 点击安装后 显示如下&#xff1a;等待完成
阅读更多...
年底了，我劝大家真别轻易离职...

年底了，我劝大家真别轻易离职...

年底了&#xff0c;一些不满现状&#xff0c;被外界的“高薪”“好福利”吸引的人&#xff0c;一般就在这时候毅然决然地跳槽了。 在此展示一套学习笔记 / 面试手册&#xff0c;年后跳槽的朋友可以好好刷一刷&#xff0c;还是挺有必要的&#xff0c;它几乎涵盖了所有的软件测试…
阅读更多...
Web自动化测试流程：从入门到精通，帮你成为测试专家！

Web自动化测试流程：从入门到精通，帮你成为测试专家！

Web应用程序在今天的软件开发中占据着越来越重要的地位。保证Web应用程序的质量和稳定性是非常必要的&#xff0c;而自动化测试是一种有效的方法。本文将介绍Web自动化测试流程&#xff0c;并提供代码示例。 步骤一&#xff1a;选取测试工具 选择适合自己团队的自动化测试工具…
阅读更多...
极限学习机

极限学习机

极限学习机&#xff08;ELM, Extreme Learning Machines&#xff09;是一种前馈神经网络&#xff0c;ELM 不需要基于梯度的反向传播来调整权重&#xff0c;而是通过 Moore-Penrose generalized inverse来设置权值。 标准的单隐藏层神经网络结构如下&#xff1a; 单隐藏层神经…
阅读更多...
ETL-使用kettle批量复制sqlserver数据到mysql数据库

ETL-使用kettle批量复制sqlserver数据到mysql数据库

文章标题 1、安装sqlserver数据库2、下载kettle3、业务分析4、详细流程&#xff08;1&#xff09;转换1&#xff1a;获取sqlserver所有表格名字&#xff0c;将记录复制到结果&#xff08;2&#xff09;转换2&#xff1a;从结果设置变量&#xff08;3&#xff09;转换3&#xff…
阅读更多...
unityplayer.dll如何安装？unityplayer.dll缺失的解决方法

unityplayer.dll如何安装？unityplayer.dll缺失的解决方法

Unityplayer.dll是Unity引擎所需的一个重要动态链接库&#xff08;DLL&#xff09;文件&#xff0c;负责在运行Unity创建的游戏或应用程序时处理相关的软件逻辑。如果此文件意外丢失&#xff0c;可能会导致错误提示&#xff0c;甚至阻止程序的正常运行。因此&#xff0c;对于许…
阅读更多...
亚马逊2024版Listing打分标准大更新：权重规则调整，卖家们需关注！

亚马逊2024版Listing打分标准大更新：权重规则调整，卖家们需关注！

亚马逊近期发布了关于“2024版Listing打分标准”的两篇文章&#xff0c;其中更新了Listing权重规则&#xff0c;引起了广大卖家的关注。 对于亚马逊卖家而言&#xff0c;打造产品Listing是产品上架前必须完成的重要任务&#xff0c;而想要成为爆款&#xff0c;则需要遵循亚马逊…
阅读更多...
[点云分割] 基于最小切割的分割

[点云分割] 基于最小切割的分割

效果&#xff1a; 代码&#xff1a; #include <iostream> #include <vector>#include <pcl/point_types.h> #include <pcl/io/pcd_io.h> #include <pcl/visualization/cloud_viewer.h> #include <pcl/filters/filter_indices.h> #include…
阅读更多...
Vatee万腾的数字化探险：Vatee科技创新勾勒新的独特轨迹

Vatee万腾的数字化探险：Vatee科技创新勾勒新的独特轨迹

在数字化时代的浪潮中&#xff0c;Vatee万腾以其强大的科技创新力量&#xff0c;开启了一场引人瞩目的数字化探险之旅。这不仅是一次技术的探索&#xff0c;更是对未知领域的大胆冒险&#xff0c;为科技的未来勾勒出一条独特的轨迹。 Vatee的数字化探险并非仅仅局限于技术的提升…
阅读更多...
双11再创新高！家电行业如何通过矩阵管理，赋能品牌增长？

双11再创新高！家电行业如何通过矩阵管理，赋能品牌增长？

双11大促已落下帷幕&#xff0c;虽然今年不再战报满天飞&#xff0c;但从公布的数据来看&#xff0c;家电行业整体表现不俗。 根据抖音电商品牌业务发布的收官战报&#xff0c;家电行业创造了成交新纪录&#xff0c;整体同比增长125%。快手官方数据显示&#xff0c;消电家居行业…
阅读更多...
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…
阅读更多...
内测分发平台的未来发展和趋势如何

内测分发平台的未来发展和趋势如何

大家好&#xff0c;我是咕噜-凯撒&#xff0c;随着软件开发行业的快速发展和更新迭代的频率不断加快&#xff0c;内测分发平台作为软件测试和发布的重要环节&#xff0c;将在未来扮演更加关键的角色。未来内测分发平台发展将呈现出一系列的新趋势,都有哪些方面呢。图片来源:new…
阅读更多...
Facebook像素的作用

Facebook像素的作用

Facebook像素是一种强大的工具&#xff0c;可以帮助企业在Facebook上进行精确的广告定位、跟踪和分析。Facebook像素的作用包括但不限于以下的几个方面&#xff0c;本文小编将对此介绍一下。 1、精准广告定位 Facebook像素能够跟踪用户在网站上的行为&#xff0c;例如浏览商品…
阅读更多...
最新文章

Copyright @ 2022~2023