web前端学习第二十四天

于 2022-04-07 20:44:41 发布
阅读量160 收藏
点赞数
文章标签： css 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/StarAh/article/details/124025956
版权

长度单位：vw / vh
目标：能够使用vw单位设置网页元素的尺寸

相对单位
相对视口的尺寸计算结果
vw：viewport width
1vw = 1/100视口宽度
vh：viewport height
1vh = 1/100视口高度

vw单位尺寸
确定设计稿对应的vw尺寸 （1/100视口宽度）
查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）

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

vh单位尺寸

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

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

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

思考：开发中，会不会vw和vh混用呢？
不会。
vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。

rem 和 vw / vh 的区别
目标：了解 rem 和 vw / vh 的区别

rem
市场比较常见：

  1. 需要不断修改html文字大小
  2. 需要媒体查询media
  3. 需要 flexible.js

vw/vh
将来(马上)趋势

  1. 省去各种判断和修改
    代表：
    b站

今天做 了两个项目，两个移动端，一个游乐园的项目用rem移动适配，一个B站的首页练习项目vw移动适配。

游乐园项目
index.less

@import "./base.less";
@import "./normalize.less";
@rootSize:37.5rem;
// 主体区域

body {
  background-color: #F0F0F0 ;
}
// 主体区域
.main {
  padding-bottom: (50 / @rootSize);
  // 背景图区域
  .banner {
    height: (160 / @rootSize);
  }
  // 活动标题
  .title {
    height: (40 / @rootSize);
    background-color: #fff;
    line-height: (40 / @rootSize);
    padding-left: (15 / @rootSize);
    
    h4 {
      font-size: (14 / @rootSize);
      color: #3C3C3C ;
    }
  }
  // 活动
  .item {
    padding-bottom: (10 / @rootSize);
    // 图片
    .pic {
      position: relative;
      height: (160 / @rootSize);
      // 收藏图标
      .icon-shoucang1 {
        position: absolute;
        top: (15 / @rootSize);
        right: (18 / @rootSize);
        font-size: (24 / @rootSize);
        color: #fff;
      }
      // 活动进行中
      .active {
        position: absolute;
        top: (-4 / @rootSize);
        left: (15 / @rootSize);
        width: (68/ @rootSize);
        height: (29 / @rootSize);
        background-image: url(../images/status_active.png);
        background-size: contain;
        font-size: (12 / @rootSize);
        color: #fff;
        text-align: center;
        line-height: (25 / @rootSize);
        &.off {
          // 灰色图片样式
          // .active.off {} 必须是active类同时应用了off类
          // 交集选择器
          background-image: url(../images/status_default.png);
        }
      }
    }
    // 文字
    .text {
      padding: (10 / @rootSize) (15 / @rootSize);
      background-color: #fff;
      .top {
        display: flex;
        justify-content: space-between;
        h5 {
          width: (295 / @rootSize);
          font-weight: 400;
          font-size: (15 / @rootSize);
        }
        p {
          font-size: (15 / @rootSize);
          a {
            color: #FE6249;
          }
        }
      }
    .bottom {
      display: flex;
      margin-top: (10 / @rootSize);
      p {
        font-size: (11 / @rootSize);
        color:#B4B4B4 ;
        margin-right: (15 / @rootSize);
        i {
          font-size: (11 / @rootSize);
        }
      }
    }
    }
  }
}

// 底部区域
footer {
  position: fixed;
  bottom: 0;
  left: 0;

  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: center;
  width: 100%;
  height: (50 / @rootSize);
  background-color: #FECA49 ;

  a {
    font-size: (11 / @rootSize);
    color: #D78B09 ;
    .iconfont {
      font-size: (24 / @rootSize);
    }
    &.first {
      color: #fff;
    }
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./lib/iconfont/iconfont.css">

</head>
<body>
  <!-- 主体区域 -->
  <div class="main">
    <!-- 背景图区域 -->
    <div class="banner">
      <ul>
        <li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li>
      </ul>
    </div>
    <!-- 活动标题 -->
    <div class="title" >
      <h4>乐园活动</h4>
    </div>
    <!-- 活动 -->
    <section class="item">
      <!-- 图片 -->
      <div class="pic">
        <a href="#"><img src="./uploads/item_2.png" alt=""></a>
        <!-- 收藏图标 -->
        <i class="iconfont icon-shoucang1"></i>
        <!-- 活动进行中 -->
        <div class="active off">进行中</div>
      </div>
      <div class="text">
        <div class="top">
            <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
            <p><a href="#">免费</a></p>
        </div>
        <div class="bottom">
          <p>
            <i class="iconfont icon-qizhi"></i>
            <span>200</span>人已报名
          </p>
          <p>
              <i class="iconfont icon-shizhong"></i>
              <span>本周六</span>开始
            </p>
        </div>
      </div>
    </section>
    <section class="item">
        <!-- 图片 -->
        <div class="pic">
          <a href="#"><img src="./uploads/item_2.png" alt=""></a>
          <!-- 收藏图标 -->
          <i class="iconfont icon-shoucang1"></i>
          <!-- 活动进行中 -->
          <div class="active off">进行中</div>
        </div>
        <div class="text">
          <div class="top">
              <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
              <p><a href="#">免费</a></p>
          </div>
          <div class="bottom">
            <p>
              <i class="iconfont icon-qizhi"></i>
              <span>200</span>人已报名
            </p>
            <p>
                <i class="iconfont icon-shizhong"></i>
                <span>本周六</span>开始
              </p>
          </div>
        </div>
      </section>
      <section class="item">
          <!-- 图片 -->
          <div class="pic">
            <a href="#"><img src="./uploads/item_2.png" alt=""></a>
            <!-- 收藏图标 -->
            <i class="iconfont icon-shoucang1"></i>
            <!-- 活动进行中 -->
            <div class="active off">进行中</div>
          </div>
          <div class="text">
            <div class="top">
                <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                <p><a href="#">免费</a></p>
            </div>
            <div class="bottom">
              <p>
                <i class="iconfont icon-qizhi"></i>
                <span>200</span>人已报名
              </p>
              <p>
                  <i class="iconfont icon-shizhong"></i>
                  <span>本周六</span>开始
                </p>
            </div>
          </div>
        </section>
        <section class="item">
            <!-- 图片 -->
            <div class="pic">
              <a href="#"><img src="./uploads/item_2.png" alt=""></a>
              <!-- 收藏图标 -->
              <i class="iconfont icon-shoucang1"></i>
              <!-- 活动进行中 -->
              <div class="active off">进行中</div>
            </div>
            <div class="text">
              <div class="top">
                  <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                  <p><a href="#">免费</a></p>
              </div>
              <div class="bottom">
                <p>
                  <i class="iconfont icon-qizhi"></i>
                  <span>200</span>人已报名
                </p>
                <p>
                    <i class="iconfont icon-shizhong"></i>
                    <span>本周六</span>开始
                  </p>
              </div>
            </div>
          </section>
          <section class="item">
              <!-- 图片 -->
              <div class="pic">
                <a href="#"><img src="./uploads/item_2.png" alt=""></a>
                <!-- 收藏图标 -->
                <i class="iconfont icon-shoucang1"></i>
                <!-- 活动进行中 -->
                <div class="active off">进行中</div>
              </div>
              <div class="text">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p><a href="#">免费</a></p>
                </div>
                <div class="bottom">
                  <p>
                    <i class="iconfont icon-qizhi"></i>
                    <span>200</span>人已报名
                  </p>
                  <p>
                      <i class="iconfont icon-shizhong"></i>
                      <span>本周六</span>开始
                    </p>
                </div>
              </div>
            </section>
            <section class="item">
                <!-- 图片 -->
                <div class="pic">
                  <a href="#"><img src="./uploads/item_2.png" alt=""></a>
                  <!-- 收藏图标 -->
                  <i class="iconfont icon-shoucang1"></i>
                  <!-- 活动进行中 -->
                  <div class="active off">进行中</div>
                </div>
                <div class="text">
                  <div class="top">
                      <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                      <p><a href="#">免费</a></p>
                  </div>
                  <div class="bottom">
                    <p>
                      <i class="iconfont icon-qizhi"></i>
                      <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                      </p>
                  </div>
                </div>
              </section>
  </div>


  <!-- 底部区域 -->
  <footer>
    <a href="#" class="first">
      <i class="iconfont icon-index-copy"></i>
      <p>首页</p>
    </a>
    <a href="#">
        <i class="iconfont icon-youhuiquan"></i>
        <p>卡卷</p>
      </a>
      <a href="#">
          <i class="iconfont icon-7"></i>
          <p>我的</p>
        </a>
  </footer>
  <script src="./js/flexible.js"></script>
</body>
</html>

在这里插入图片描述

B站首页
index.less

//otu:../css/
@import "./base.less";
@vw:3.75vw;
@color:#fb7299;
// 头部固定
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: (84 / @vw);
  z-index: 1;
  background-color: #fff;
  // background-color: aqua;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: (44 / @vw);
    padding-left: (18 / @vw);
    padding-right: (12 / @vw);
    .left {
      .iconfont{
        font-size: (28 / @vw);
        color: @color;
      }
      
    }
    .rigth {
      display: flex;
      .iconfont {
        font-size: (22 / @vw);
        color: #ccc;
      }
      .sign {
        width: (24 / @vw);
        height: (24 / @vw);
        margin-left: (24 / @vw);
      }
      .download {
        width:(72 / @vw);
        height: (24 / @vw);
        margin-left: (24 / @vw);
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    // align-items: center;
    height: (40 / @vw);
    border-bottom: 1px solid #eeeeee;
    .move {
      a {
        display: block;
        width: (40 / @vw);
        height: (40 / @vw);
        // background-color: #fb7299;
        font-size: (22 / @vw);
        text-align: center;
        line-height: (40 / @vw);
        color: #ccc;
        .iconfont {
          font-size: (22 / @vw);
        }
      }
    }
    .tab {
      ul {
        display: flex;
        li {
          padding: 0 (16 / @vw);
          a {
            display: block;
            height: (38 / @vw);
            font-size: (14 / @vw);
            line-height: (38 / @vw);
            &.current {
              color: @color;
              border-bottom: 2px solid @color;
            }
          }
        }
      }
    }
  }
}

// 视频
.video_centent {
  padding: (84 / @vw) (5 / @vw) 0;
  .video_list {
    display: flex;
    flex-wrap: wrap;
    a {
      width: 50%;
      padding: ( 8 / @vw) (5 / @vw);
      font-size: (12 / @vw);
      .pic {
        position: relative;
        width: 100%;
        .count {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding: (8 / @vw);
          color: #fff;
          background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
        }
      }
      .centent {
        .txt {
          margin-top: (5 / @vw);
        }
      }
    }
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./fonts/iconfont.css">
</head>
<body>
    <!-- 1,头部固定 -->
    <header>
      <div class="top">
        <div class="left">
          <a href="#" >
             <i class="iconfont Navbar_logo"></i>
          </a>

        </div>
        <div class="rigth">
          <a href="#">
            <i class="iconfont ic_search_tab"></i>
          </a>
          <a href="#" class="sign">
            <img src="./images/login.png" alt="">
          </a>
          <a href="#" class="download">
            <img src="./images/download.png" alt="">
          </a>
        </div>
      </div>
      <div class="bottom">
        <div class="tab">
          <ul>
            <li><a href="#" class="current">首页</a></li>
            <li><a href="#">动漫</a></li>
            <li><a href="#">番剧</a></li>
            <li><a href="#">国创</a></li>
            <li><a href="#">音乐</a></li>
          </ul>
        </div>
        <div class="move">
          <a href="#">
              <i class="iconfont general_pulldown_s"></i>
          </a>
        </div>
      </div>
    </header>
    <!-- tab:菜单的个数要和内容的个数相等的 -->
    <!-- 2,视频 -->
    <!-- 视频区域布局 -->
    <section class="video_centent">
      <div class="video_list">
        <a href="#">
          <div class="pic">
            <img src="./images/1.jpg" alt="">
            <div class="count">
                <p>
                  <i class="iconfont icon_shipin_bofangshu"></i>
                  <span>132万</span>
                </p>
                <p>
                    <i class="iconfont icon_shipin_danmushu"></i>
                    <span>2.4万</span>
                  </p>
              </div>
          </div>
          <div class="centent">
            <p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
          </div>
        </a>
        <a href="#">
            <div class="pic">
              <img src="./images/1.jpg" alt="">
              <div class="count">
                  <p>
                    <i class="iconfont icon_shipin_bofangshu"></i>
                    <span>132万</span>
                  </p>
                  <p>
                      <i class="iconfont icon_shipin_danmushu"></i>
                      <span>2.4万</span>
                    </p>
                </div>
            </div>
            <div class="centent">
              <p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
            </div>
          </a>
          <a href="#">
              <div class="pic">
                <img src="./images/1.jpg" alt="">
                <div class="count">
                    <p>
                      <i class="iconfont icon_shipin_bofangshu"></i>
                      <span>132万</span>
                    </p>
                    <p>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        <span>2.4万</span>
                      </p>
                  </div>
              </div>
              <div class="centent">
                <p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
              </div>
            </a>
            <a href="#">
                <div class="pic">
                  <img src="./images/1.jpg" alt="">
                  <div class="count">
                      <p>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        <span>132万</span>
                      </p>
                      <p>
                          <i class="iconfont icon_shipin_danmushu"></i>
                          <span>2.4万</span>
                        </p>
                    </div>
                </div>
                <div class="centent">
                  <p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
                </div>
              </a>
              <a href="#">
                  <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                          <i class="iconfont icon_shipin_bofangshu"></i>
                          <span>132万</span>
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4万</span>
                          </p>
                      </div>
                  </div>
                  <div class="centent">
                    <p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
                  </div>
                </a>
                <a href="#">
                    <div class="pic">
                      <img src="./images/1.jpg" alt="">
                      <div class="count">
                          <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132万</span>
                          </p>
                          <p>
                              <i class="iconfont icon_shipin_danmushu"></i>
                              <span>2.4万</span>
                            </p>
                        </div>
                    </div>
                    <div class="centent">
                      <p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
                    </div>
                  </a>
                  <a href="#">
                      <div class="pic">
                        <img src="./images/1.jpg" alt="">
                        <div class="count">
                            <p>
                              <i class="iconfont icon_shipin_bofangshu"></i>
                              <span>132万</span>
                            </p>
                            <p>
                                <i class="iconfont icon_shipin_danmushu"></i>
                                <span>2.4万</span>
                              </p>
                          </div>
                      </div>
                      <div class="centent">
                        <p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
                      </div>
                    </a>
                    <a href="#">
                        <div class="pic">
                          <img src="./images/1.jpg" alt="">
                          <div class="count">
                              <p>
                                <i class="iconfont icon_shipin_bofangshu"></i>
                                <span>132万</span>
                              </p>
                              <p>
                                  <i class="iconfont icon_shipin_danmushu"></i>
                                  <span>2.4万</span>
                                </p>
                            </div>
                        </div>
                        <div class="centent">
                          <p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
                        </div>
                      </a>
                      <a href="#">
                          <div class="pic">
                            <img src="./images/1.jpg" alt="">
                            <div class="count">
                                <p>
                                  <i class="iconfont icon_shipin_bofangshu"></i>
                                  <span>132万</span>
                                </p>
                                <p>
                                    <i class="iconfont icon_shipin_danmushu"></i>
                                    <span>2.4万</span>
                                  </p>
                              </div>
                          </div>
                          <div class="centent">
                            <p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
                          </div>
                        </a>
                        <a href="#">
                            <div class="pic">
                              <img src="./images/1.jpg" alt="">
                              <div class="count">
                                  <p>
                                    <i class="iconfont icon_shipin_bofangshu"></i>
                                    <span>132万</span>
                                  </p>
                                  <p>
                                      <i class="iconfont icon_shipin_danmushu"></i>
                                      <span>2.4万</span>
                                    </p>
                                </div>
                            </div>
                            <div class="centent">
                              <p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
                            </div>
                          </a>
                          <a href="#">
                              <div class="pic">
                                <img src="./images/1.jpg" alt="">
                                <div class="count">
                                    <p>
                                      <i class="iconfont icon_shipin_bofangshu"></i>
                                      <span>132万</span>
                                    </p>
                                    <p>
                                        <i class="iconfont icon_shipin_danmushu"></i>
                                        <span>2.4万</span>
                                      </p>
                                  </div>
                              </div>
                              <div class="centent">
                                <p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
                              </div>
                            </a>
                            <a href="#">
          <div class="pic">
            <img src="./images/1.jpg" alt="">
            <div class="count">
                <p>
                  <i class="iconfont icon_shipin_bofangshu"></i>
                  <span>132万</span>
                </p>
                <p>
                    <i class="iconfont icon_shipin_danmushu"></i>
                    <span>2.4万</span>
                  </p>
              </div>
          </div>
          <div class="centent">
            <p class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</p>
          </div>
        </a>
      </div>
    </section>

    <!-- 3,按钮固定 -->
</body>
</html>

在这里插入图片描述

StarAh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值