AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

前端移动web详细解析四

2023-12-11 56
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
公共DNS（含HTTPDNS解析），每月1000万次HTTP解析
全局流量管理 GTM，标准版 1个月
云解析 DNS，旗舰版 1个月
简介： 移动 Web 第四天01-vw适配方案vw和vh基本使用vw和vh是相对单位，相对视口尺寸计算结果vw：viewport width（1vw = 1/100视口宽度 ）vh：lviewport height ( 1vh = 1/100视口高度 )

移动 Web 第四天

01-vw适配方案

vw和vh基本使用

vw和vh是相对单位，相对视口尺寸计算结果

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

vw布局

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

vh问题

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

02-综合案例-酷我音乐

769b4b266ed0474ea6d8d39fa05b4f01.png

准备工作

7b6a5c9de95a495ab6e285e3eb8164ce.png

  • HTML 结构
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/index.css">
  • less 样式
// out: ../css/
​
@import "./base";

头部布局

  • 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;
}

头部内容

  • 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);
  }
}

搜索区域

  • 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);
    }
  }
}

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);
      }
    }
  }
}
标题

公共样式

  • 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;
  }
}

排行榜内容

  • 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);
        }
      }
    }
  }
}

推荐歌单布局

  • 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;
    }
  }
}

推荐歌单内容

  • 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);
}

下载区域

  • 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);
  }
}

头部固定

  • 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);
}
文章标签：
云解析DNS
前端开发
关键词：
前端web
web前端
web云解析DNS
web解析
云解析DNS web
东北赵四
目录
相关文章
小徐在进步
|
22小时前
|
前端开发
【前端web入门第八天】定位、CSS精灵与一些其他CSS高级技巧
定位、CSS精灵与一些其他CSS高级技巧
小徐在进步
15 9
小徐在进步
|
22小时前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法，包括清除内外边距、列表项目符号等；探讨了外边距的合并与塌陷问题及其解决策略；讲解了行内元素垂直边距的处理技巧；并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例，展示了所学知识的实际应用。
小徐在进步
17 11
小徐在进步
|
22小时前
|
前端开发
【前端web入门第五天】01 结构伪类选择器与伪元素选择器
本文介绍了CSS中的结构伪类选择器和伪元素选择器。结构伪类选择器如`nth-child`可根据元素结构关系进行选择，例如将列表中首个`&lt;li&gt;`元素背景设为绿色。伪元素选择器用于创建装饰性内容。
小徐在进步
16 8
小徐在进步
|
22小时前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式，通过给父元素设置`display: flex`，其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子，主轴默认为水平方向，侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制，侧轴对齐方式包括`align-items`（针对所有子元素）和`align-self`（针对单个子元素）。修改主轴方向使用`flex-direction`属性，`flex`属性用于控制子元素在主轴上的伸缩比例。此外，`flex-wrap`属性允许子元素换行，而`align-content`属性则定义多行对齐方式。
小徐在进步
16 9
小徐在进步
|
22小时前
|
前端开发
【前端web入门第五天】02 盒子模型基础
本文档详细介绍了CSS中的盒子模型及其组成部分，包括内容区域、内边距、边框线和外边距。通过具体示例展示了如何设置边框线、内边距及外边距，并解释了尺寸计算方法和版心居中的技巧。内容丰富，示例清晰，有助于理解盒子模型在网页布局中的应用。
小徐在进步
12 7
小徐在进步
|
22小时前
|
前端开发
前端web入门第四天】03 显示模式+综合案例热词与banner效果
本文档介绍了HTML中标签的三种显示模式：块级元素、行内元素与行内块元素，并详细解释了各自的特性和应用场景。块级元素独占一行，宽度默认为父级100%，可设置宽高；行内元素在同一行显示，尺寸由内容决定，设置宽高无效；行内块元素在同一行显示，尺寸由内容决定，可设置宽高。此外，还提供了两个综合案例，包括热词展示和banner效果实现，帮助读者更好地理解和应用这些显示模式。
小徐在进步
13 6
小徐在进步
|
22小时前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍，主要解决多个`&lt;div&gt;`标签在同一行显示的问题，即一个在左边，另一个在右边。文中介绍了标准流、浮动及flex布局的概念，重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法，包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法，并提供了示例代码帮助理解。
小徐在进步
12 6
孙飞i
|
1月前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
孙飞i
20 0
艾尼麻麻
|
3月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
艾尼麻麻
63 2
爱你三千遍斯塔克
|
3月前
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记
爱你三千遍斯塔克
43 0

热门文章

最新文章

  • 1
    微信小程序前端(纯前端)如何解密手机号？
  • 2
    【初探移动前端开发03】jQuery Mobile（上）
  • 3
    前端：组件、插件、模块、子应用、库、框架等区别
  • 4
    前端机器学习简史
  • 5
    强化用户体验与安全性：前端单点登录和统一认证的最佳实践与区别
  • 6
    我所知道的前端组件化与模块化
  • 7
    前端JS-SDK那些事
  • 8
    深入理解 BEM：前端开发中的命名约定革命
  • 9
    前端 excelex 包可将数据保存为 xls、xlsx、csv、txt 文件（支持单元格样式、合并单元格等）
  • 10
    前端工作总结238-uni-设置请求参数
  • 1
    【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的？
    62
  • 2
    【Web 前端】jQuery 里的 each() 是什么函数？你是如何使用它的？
    124
  • 3
    【Web 前端】如何找到所有 HTML select 标签的选中项？
    80
  • 4
    【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同？
    58
  • 5
    【Web 前端】$(document).ready() 是个什么函数？为什么要用它？
    427
  • 6
    【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片？
    158
  • 7
    20：基于EL与JSTL的产品管理页-Java Web
    46
  • 8
    19：Web开发模式与MVC设计模式-Java Web
    67
  • 9
    18：JavaBean简介及其在表单处理与DAO设计模式中的应用-Java Web
    69
  • 10
    17：数据库连接池与Servlet整合-Java Web
    89

    • 相关课程

    更多
  • 企业Web常用架构LAMP-LNMP实战
  • 高校精品课-西安交通大学-Web 编程技术
  • Java Web项目实战 - 图书商城
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计

    • 相关电子书

    更多
  • Web应用系统性能优化
  • 高性能Web架构之缓存体系
  • PWA:移动Web的现在与未来

    • 相关实验场景

    更多
  • 基于小程序Serverless开发个人相册小程序
  • Internet Information Services（IIS）部署Web项目
  • 基于函数计算快速搭建Zblog等传统应用框架
  • 云上Web及FTP
  • WEB网页编程实战

    • 推荐镜像

    更多
  • DNS
  • NTP
  • termux
    • 下一篇
    什么是 Load balancer？