移动Web

2023-12-25 19:40:50

移动 Web

一、平面转换

作用:为元素添加动态效果,一般与过渡配合使用

概念:改变盒子在平面内的形态(位移、旋转、缩放、倾斜)

在这里插入图片描述

平面转换也叫 2D 转换,属性是 transform

1. 平移

transform: translate(X轴移动距离, Y轴移动距离);
  • 取值
    • 像素单位数值
    • 百分比(参照盒子自身尺寸计算结果)
    • 正负均可
  • 技巧
    • translate() 只写一个值,表示沿着 X 轴移动
    • 单独设置 X 或 Y 轴移动距离:translateX() 或 translateY()

定位居中

  • 方法一:margin

在这里插入图片描述

  • 方法二:平移 → 百分比参照盒子自身尺寸计算结果

在这里插入图片描述

2. 旋转

transform: rotate(旋转角度);
  • 取值:角度单位是 deg
  • 技巧
    • 取值正负均可
    • 取值为正,顺时针旋转
    • 取值为负,逆时针旋转

转换原点

默认情况下,转换原点是盒子中心点

transform-origin: 水平原点位置 垂直原点位置;

取值:

  • 方位名词(left、top、right、bottom、center)
  • 像素单位数值
  • 百分比

多重转换

多重转换技巧:先平移再旋转

transform: translate() rotate();
  • 多重转换原理:以第一种转换方式坐标轴为准转换形态
    • 旋转会改变网页元素的坐标轴向
    • 先写旋转,则后面的转换效果的轴向以旋转后的轴向为准,会影响转换结果

缩放

transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);
  • 技巧
    • 通常,只为 scale() 设置一个值,表示 X 轴和 Y 轴等比例缩放
    • 取值大于1表示放大,取值小于1表示缩小

倾斜

transform: skew();

取值:角度度数 deg

3. 渐变

渐变是多个颜色逐渐变化的效果,一般用于设置盒子背景

分类:

  • 线性渐变

在这里插入图片描述

  • 径向渐变

在这里插入图片描述

线性渐变

background-image: linear-gradient(
  渐变方向,
  颜色1 终点位置,
  颜色2 终点位置,
  ......
);

取值:

  • 渐变方向:可选
    • to 方位名词
    • 角度度数
  • 终点位置:可选
    • 百分比

径向渐变

background-image: radial-gradient(
  半径 at 圆心位置,
  颜色1 终点位置,
  颜色2 终点位置,
  ......
);

取值:

  • 半径可以是2条,则为椭圆
  • 圆心位置取值:像素单位数值 / 百分比 / 方位名词

二、空间转换

  • 空间:是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间,Z 轴位置与视线方向相同。
  • 空间转换也叫 3D转换
  • 属性:transform

在这里插入图片描述

1. 平移

transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();

取值与平面转换相同

默认情况下,Z 轴平移没有效果,原因:电脑屏幕默认是平面,无法显示 Z 轴平移效果

视距

作用:指定了观察者与 Z=0 平面的距离,为元素添加透视效果

透视效果:近大远小、近实远虚

属性:(添加给父级,取值范围 800-1200)

perspective: 视距;

在这里插入图片描述

2. 旋转

  • Z 轴:rotateZ()

  • X 轴:rotateX()

  • Y 轴:rotateY()

左手法则

作用:根据旋转方向确定取值正负

使用:左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向

在这里插入图片描述

rotate3d-了解

  • rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度
  • x,y,z 取值为0-1之间的数字

立体呈现

作用:设置元素的子元素是位于 3D 空间中还是平面中

属性名:transform-style

属性值:

  • flat:子级处于平面中
  • preserve-3d:子级处于 3D 空间

缩放

transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();

3. 动画

  • 过渡:实现两个状态间的变化过程
  • 动画:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)

动画实现步骤

  1. 定义动画
/* 方式一 */
@keyframes 动画名称 {
  from {}
  to {}
}

/* 方式二 */
@keyframes 动画名称 {
  0% {}
  10% {}
  ......
  100% {}
}
  1. 使用动画
animation: 动画名称 动画花费时长;

animation复合属性

在这里插入图片描述

提示:

  • 动画名称和动画时长必须赋值
  • 取值不分先后顺序
  • 如果有两个时间值,第一个时间表示动画时长,第二个时间表示延迟时间

animation拆分写法

在这里插入图片描述

精灵动画

  • 核心

在这里插入图片描述

  • 制作步骤

    1.准备显示区域

    盒子尺寸与一张精灵小图尺寸相同

    2.定义动画

    移动背景图(移动距离 = 精灵图宽度)

    3.使用动画

    steps(N),N 与精灵小图个数相同

div {
  width: 140px;
  height: 140px;
  border: 1px solid #000;
  background-image: url(./images/bg.png);
  animation: run 1s steps(12) infinite;
}

@keyframes run {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1680px 0;
  }
}

多组动画

animation: 
  动画一,
  动画二,
  ... ...
;

三、移动适配

1. 谷歌模拟器

模拟移动设备,方便查看页面效果

在这里插入图片描述

屏幕分辨率

分类:

  • 物理分辨率:硬件分辨率(出厂设置)
  • 逻辑分辨率:软件 / 驱动设置

结论:制作网页参考 逻辑分辨率

在这里插入图片描述

视口

作用:显示 HTML 网页的区域,用来约束 HTML 的尺寸

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!– 视口标签 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>
</head>
<body>
  
</body>
</html>
  • width=device-width:视口宽度 = 设备宽度
  • initial-scale=1.0:缩放1倍(不缩放)

二倍图

概念:设计稿里面每个元素的尺寸的倍数

作用:防止图片在高分辨率屏幕下模糊失真

使用方法:

在这里插入图片描述

适配方案

  • 宽度适配:宽度自适应

    • 百分比布局
    • Flex 布局
  • 等比适配:宽高等比缩放

    • rem
    • vw

2. rem

  • rem单位,是相对单位
  • rem单位是相对于HTML标签的字号计算结果
  • 1rem = 1HTML字号大小

媒体查询

媒体查询能够检测视口的宽度,然后编写差异化的 CSS 样式

当某个条件成立, 执行对应的CSS样式

在这里插入图片描述

@media (width:320px) {
  html {
    background-color: green;
  }
}

rem 布局

目前rem布局方案中,将网页等分成10份, HTML标签的字号为视口宽度的 1/10。

在这里插入图片描述

flexible.js

flexible.js 是手淘开发出的一个用来适配移动端的 js 库。

核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。

<body>
  ......
  <script src="./js/flexible.js"></script>
</body>

rem 移动适配

rem单位尺寸

  1. 确定基准根字号
  • 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号(1/10视口宽度)
  1. rem单位的尺寸
  • rem单位的尺寸 = px单位数值 / 基准根字号

3. less

Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力

注意:浏览器不识别 Less 代码,目前阶段,网页要引入对应的 CSS 文件

VS Code 插件:Easy LESS,保存 less文件后自动生成对应的 CSS 文件

在这里插入图片描述

注释

  • 单行注释
    • 语法:// 注释内容
    • 快捷键:ctrl + /
  • 块注释
    • 语法:/* 注释内容 */
    • 快捷键: Shift + Alt + A

运算

  • 加、减、乘直接书写计算表达式
  • 除法需要添加 小括号 或 .
  • 表达式存在多个单位以第一个单位为准

在这里插入图片描述

嵌套

作用:快速生成后代选择器

在这里插入图片描述

提示:用 & 表示当前选择器,不会生成后代选择器,通常配合伪类或伪元素使用

在这里插入图片描述

变量

概念:容器,存储数据

作用:存储数据,方便使用和修改

语法:

  • 定义变量:@变量名: 数据;
  • 使用变量:CSS属性:@变量名;
// 定义变量
@myColor: pink;
// 使用变量
.box {
  color: @myColor;
}
a {
  color: @myColor;
}

导入

作用:导入 less 公共样式文件

语法:导入: @import “文件路径”;

提示:如果是 less 文件可以省略后缀

@import './base.less';
@import './common';

导出

写法:在 less 文件的第一行添加 // out: 存储URL

提示:文件夹名称后面添加 /

// out: ./index.css
// out: ./css/

禁止导出

写法:在 less 文件第一行添加: // out: false

在这里插入图片描述

4. 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视口高度,全面屏视口高度尺寸大,如果混用可能会导致盒子变形

综合案例-酷我音乐

在这里插入图片描述

准备工作

在这里插入图片描述

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

四、响应式布局

1. 媒体查询

基本写法

在这里插入图片描述

  • max-width:最大宽度(小于等于)
  • min-width:最小宽度(大于等于)

书写顺序

  • min-width(从小到大)
  • max-width(从大到小)

媒体查询-完整写法

在这里插入图片描述

关键词 / 逻辑操作符

  • and
  • only
  • not

媒体类型

媒体类型用来区分设备类型

  • screen:屏幕设备
  • 打印预览:print
  • 阅读器:speech
  • 不区分类型:all

媒体特性

  • 视口宽高:width / height
  • 视口最大宽高:max-width ;max-height
  • 视口最小宽高:min-width;min-height
  • 屏幕方向:orientation
    • protrait:竖屏
    • landscape:横屏

媒体查询-外部CSS

在这里插入图片描述

2. Bootstrap

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合一定 HTML 结构及JavaScript,快速编写功能完善的网页及常见交互效果。

中文官网:https://www.bootcss.com/

使用步骤

下载

下载:Bootstrap V5中文文档 → 进入中文文档 → 下载 →下载 Bootstrap 生产文件

在这里插入图片描述

使用

  1. 引入 Bootstrap CSS 文件
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
  1. 调用类名: container 响应式布局版心类
<div class="container">测试</div>

栅格系统

作用:响应式布局

栅格化是指将整个网页的宽度分成12等份,每个盒子占用的对应的份数

例如:一行排4个盒子,则每个盒子占 3份 即可(12 / 4 = 3)

在这里插入图片描述

  • row 类:行,可以让内容在一行排(flex布局)

全局样式

按钮

在这里插入图片描述

类名

  • btn:默认样式
  • btn-success:成功
  • btn-warning:警告
  • ……
  • 按钮尺寸:btn-lg / btn-sm

表格

在这里插入图片描述

表格类

  • table:默认样式
  • table-striped:隔行变色
  • table-success:表格颜色
  • ……

组件

1.引入样式表

2.引入 js 文件

3.复制结构,修改内容

字体图标

下载

导航 / Extend:图标库 → 安装 → 下载安装包 → bootstrap-icons-1.X.X.zip

使用

  1. 复制 fonts 文件夹到项目目录
  2. 网页引入 bootstrap-icons.css 文件
  3. 调用 CSS 类名(图标对应的类名)
<i class="bi-android2"></i>

文章来源:https://blog.csdn.net/fhsbvs/article/details/135133846
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。