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

前端移动web详细解析四

2023-12-11 91
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 移动 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解析
东北赵四
目录
相关文章
游客vwx7bav3mqbk6
|
1月前
|
并行计算 前端开发 JavaScript
Web Worker：让前端飞起来的隐形引擎
在现代 Web 开发中，前端性能优化是一个至关重要的课题，尤其是对于计算密集型的应用，如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈，导致应用变得迟缓。Web Worker，作为一种强大的技术，使得前端能够在后台进行并行计算，从而实现高效的任务处理，不影响主线程的运行和用户的交互体验。
游客vwx7bav3mqbk6
289 108
卓伊凡
|
1月前
|
JavaScript 前端开发 Java
前端框架选择之争：jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争：jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
卓伊凡
258 72
前端框架选择之争：jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
卓伊凡
|
4月前
|
存储 算法 安全
JWT深度解析：现代Web身份验证的通行证为什么现在都是JWT为什么要restful-优雅草卓伊凡
JWT深度解析：现代Web身份验证的通行证为什么现在都是JWT为什么要restful-优雅草卓伊凡
卓伊凡
253 41
JWT深度解析：现代Web身份验证的通行证为什么现在都是JWT为什么要restful-优雅草卓伊凡
kijlee
|
3月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境，并基于 HTML5 Boilerplate 提供基础模板，快速启动现代前端开发。
kijlee
41 2
jsjsjjs
|
3月前
|
Web App开发 编解码 移动开发
零基础音视频入门：你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程，同时还介绍了视频的编码、帧率、比特率等概念，提到了Canvas作为视频播放的替代方案，以及FFmpeg在音视频处理中的重要作用等知识。
jsjsjjs
81 1
dasein58
|
4月前
|
存储 前端开发 JavaScript
【微前端】singleSpa&importHTMLEntry（流程图）源码解析
https://www.hsbang.com/sitemap.xml
dasein58
93 2
【微前端】singleSpa&importHTMLEntry（流程图）源码解析
全干程序员demo
|
5月前
|
存储 前端开发 JavaScript
调用DeepSeek API增强版纯前端实现方案，支持文件上传和内容解析功能
本方案基于DeepSeek API增强版，提供纯前端实现的文件上传与内容解析功能。通过HTML和JavaScript，用户可选择文件并调用API完成上传及解析操作。方案支持多种文件格式（如PDF、TXT、DOCX），具备简化架构、提高响应速度和增强安全性等优势。示例代码展示了文件上传、内容解析及结果展示的完整流程，适合快速构建高效Web应用。开发者可根据需求扩展功能，满足多样化场景要求。
全干程序员demo
1953 64
请看我回答~
|
10月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中，Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念，正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用，同时通过一个简单的代码示例，揭示如何将一个庞大的前端工程拆分成小而美的模块，进而提升项目的可维护性、可扩展性和开发效率。
请看我回答~
197 0
卓伊凡
|
7月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
卓伊凡
186 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
土木林森
|
10月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制，两者不仅提升了代码复用率和可维护性，还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战，文章提出了相应的解决策略，强调了持续创新的重要性，旨在构建高效、灵活的Web应用。
土木林森
203 6

热门文章

最新文章

  • 1
    前端框架选择之争：jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
  • 2
    2025 热门的 Web 化容器部署工具对比：Portainer VS Websoft9
  • 3
    如何让AI帮你做前端自动化测试？我们这样落地了
  • 4
    AMIS：百度开源的前端低代码神器，18.4k star 背后的开发效率提升利器
  • 5
    前端埋点校验工具：数据驱动的最后一道防线
  • 6
    GitHub 2.8k star 开源既封神，“Liquid‑Glass‑React”，让你前端界面瞬间拥有苹果级液态玻璃效果！
  • 7
    踩坑与成长：WordPress、MyBatis-Plus 及前端依赖问题解决记录
  • 8
    前端性能追踪工具：用户体验的毫秒战争
  • 9
    大模型如何赋能 Web 渗透测试？
  • 10
    Web Worker：让前端飞起来的隐形引擎
  • 1
    Web前端网站（三）- 记事本
    201
  • 2
    【优秀python web设计】基于Python flask的猫眼电影可视化系统，可视化用echart，前端Layui，数据库用MySQL，包括爬虫
    389
  • 3
    【优秀python web系统毕设】基于python的全国招聘数据分析可视化系统，包括随机森林算法
    712
  • 4
    【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统，django框架+bootstrap前端+echarts可视化，有后台有爬虫
    520
  • 5
    探索PHP的现代演进：从Web 1.0到Web 3.0
    99
  • 6
    构建高性能Web应用的最佳实践
    140
  • 7
    Web应用防火墙是什么？浅析如何提高抵御威胁实际效能
    113
  • 8
    【Mac os】如何在服务器上启动Jupyter notebook并在本地浏览器Web端环境编辑程序
    665
  • 9
    【网络安全】Web Hacking网络黑客手册，GitHub星标3.7K！
    177
  • 10
    【颠覆想象！】PHP 8横空出世：全新特性重塑Web开发格局，开发者必看的革命性变革之旅！
    143

    • 相关课程

    更多
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 推荐镜像

    更多
  • DNS
    • 下一篇
    蛋白质语言模型 ProGen：在实验室合成由 AI 预测的蛋白质