03web前端进阶教程--移动端

M.AI

已于 2023-07-11 00:42:08 修改

阅读量122

点赞数

分类专栏：前端文章标签：前端

于 2023-07-04 21:31:48 首次发布

本文链接：https://blog.csdn.net/weixin_44403520/article/details/126914892

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

0 来源

跳转学习路线介绍

跳转讲解视频
 github代码

1 HTML CSS拓展强化

1.1 iconfont 字体图标

目标：使用字体图标技巧实现网页中轻量、简洁的图标效果

字体图标展示的是图标，本质是字体。
处理简单的、颜色单一（可以改变颜色）的图片
轻量级：体积小、渲染快、降低服务器请求次数

拓展：IconFont网站上传矢量图生成字体图标
浏览本地图标 → 去除颜色提交

1.2 transform 平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等效果
子级编写效果，父级声明转换：transition: all 0.5s;

1.2.1 translate 位移

translate：

express the sense of (words or text) in another language.
move from one place or condition to another.
PHYSICS: cause (a body) to move so that all its parts travel in the same direction, without rotation or change of shape.

语法：
transform: translate(水平移动距离, 垂直移动距离);
绝对定位居中：

transform: translate(-50%, -50%);

1.2.2 rotate 旋转

transform: rotate(角度+deg)：

取值为正, 则顺时针旋转
取值为负, 则逆时针旋转

使用transform-origin属性改变转换原点
transform-origin: 原点水平位置原点垂直位置；方位名词（left、top、right、bottom、center）

transform复合属性：
transform: translate(600px) rotate(720deg);
旋转会改变网页元素的坐标轴向
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
拓展：阿基米德螺旋等图形的绘制？

1.2.3 scale 缩放

transform: scale(缩放倍数);
transform: scale(x轴缩放倍数, y轴缩放倍数);
配合透明度缩放：

/* 设置初始为透明 */
 opacity: 0;
 /* 过渡设置 */
 transition: all 0.3s;

1.3 渐变

渐变是多个颜色逐渐变化的视觉效果，一般用于设置盒子的蒙版背景

background-image: linear-gradient(
                transparent,
                rgba(0,0,0,0.4)

2 空间转换&动画（非重点）

2.1 空间转换

transform: translate3d(x,y,z)
近大远小透视效果（添加给父级）
perspective ：像素单位数值，数值一般在800 – 1200
rotate3d(x, y, z, 角度度数)：判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
使用transform-style: preserve-3d（父级添加）呈现立体图形

2.2 动画

使用animation添加动画效果

2.2.1 实现步骤：

1.定义动画
示例代码

@keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 500px;
            }
            
 }

@keyframes change1 {
            0% {
                width: 200px;
            }

            30% {
                width: 400px;
            }

            80% {
                width: 800px;
            }

            100% {
                width: 1200px;
            }
            
 }

使用动画

animation:动画名称 时长等
animation: change1 1s 5 forwards  linear 2s alternate;

2.2.2 逐帧动画

开发中，一般配合精灵图实现动画效果
animation-timing-function: steps(N)；
animation: run 1s steps(12) infinite,

3 移动web开发

3.1 百分比布局

aka流式布局，宽度自适应，高度固定。

3.2 Flex布局

3.2.1 基础介绍

浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题
tips：现在流行的各种比例的手持设备屏幕适配问题是否于此有关
设置方式：
父元素添加 display: flex，不需设置高度，子元素可以自动的挤压或拉伸，
组成坐标轴

3.2.2 具体使用

主轴对齐方式
父级使用属性justify-content调节元素在主轴的对齐方式：

属性值	作用
flex-start	默认，起点依次排列
flex-end	逆向默认，终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
spae-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间，常用
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

侧轴（交叉轴）对齐方式
父级使用属性align-items调节元素在侧轴的对齐方式:

属性值	作用
flex-start	默认，起点依次排列
flex-end	逆向默认，终点开始依次排列
center	沿交叉轴居中排列
stretch	默认值, 弹性盒子沿着主轴线被拉伸至铺满容器

当前元素使用align-self实现本身的交叉轴对齐方式：

.box div:nth-child(2) {
            align-self: center;
        }

此处略去**个字

4 移动端适配

4.1 技术手段

rem
vw/vh

4.2 rem

4.2.1 媒体（显示器硬件）查询

百分比无法实现高度适配设置。
rem根据html标签字号（根标签）的相对单位。

	@media (width:375px) {
        html {
            font-size: 420px;
        }
    }

    @media (width:820px) {
        html {
            font-size: 600px;
        }
    }
    .box {
		width: 3rem;
		height: 2rem;
	}

一般html的字号设置为视口宽度的1/10。
设计稿中：
1、确定屏幕尺寸
2、px/rem根标签字号转换即可

4.2.2 flexible.js

以上媒体查询为手写，flexible.js涵盖大部分显示器视口尺寸，省去@media格式.
js文件的引入在body标签的最下面

4.2.3 less

需要安装easy less的vscode插件
1、css不支持计算公式开发，less框架补足此瑕疵，
2、并可进一步优化灵活css写法规则——类似html可嵌套书写。
3、变量的设置——@变量名：值；
使用——css属性：@变量名。
4、引入与导出
导出路径设置：

配置插件：设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号），示例：

"less.compile": {
        // css后要有/表示路径文件夹
     "out":"../css/"
    },

特定设置
less文件的首行设置单独导出路径

// out: ./abc/

禁止导出

// out: false

4.2.4 rem项目：游乐园-生疏知识点

字体图标的使用切记找到文件后，切换到font calss找对应的名称。
背景图片的包涵关系：

background-image: url(../images/status_active.png);
background-size: contain;

交集选择器
&.off
居中

// 水平居中
    text-align: center;
    // 垂直居中
    align-items: center;

4.3 vm/vh：相对长度单位

viewport width
viewport height
1vw=1/100视口宽度
1vh=1/100视口高度

由于是百分比的相对长度单位，不同长宽比的手机、电脑在混用vm/vh的情况下页面会发生形变
不再需要视口查询，flexible的js文件

4.3.1 项目B-生疏知识点

蒙版：

 background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));

两列设置
flex-wrap: wrap;
悬浮固定
z-index属性设置
生疏知识点

justify-content: space-between;
// flex调整分布后有时候需要宽度设置为盒子模型宽度
width: 100%;

4.4 响应式布局

4.4.1 媒体查询

max-width/min-width
需要注意层叠性的数值大小
媒体查询外链格式：
<link rel="stylesheet" href="./one.css" media="(min-width: 992px)">

根据视口宽度隐藏部分区域：

/* 如果检测到视口宽度小于768px, 认为是手机端, left隐藏 */
        @media (max-width: 768px) {
            .left {
                display: none;
            }

4.4.2 BootStrap

4.4.2.1 介绍

Twitter开源的UI框架，封装了大量的HTML、CSS、JavaScript，只需要按照框架要求书写代码，即可快速完成对应的效果

下载
1、非最新版，旧版稳定
2、生产环境精简版代码即可，遇到问题源码查看

4.4.2.2 bootstrap 栅格系统

视口等分12份，书写格式
col-lg/md/sm/xs-份数
768,992,1200px尺寸分界线
发现bootstrap3和4、5版本冲突，栅格系统示例效果不同，鉴于初学，不做深究，先按3版本学习，有关代码如下：

<!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>bootstrap01</title>
    <link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="../bootstrap-4.6.2-dist/css/bootstrap.min.css"> -->
    <!-- <link rel="stylesheet" href="../bootstrap-5.2.3-dist/css/bootstrap.min.css"> -->

    <style>
        
        .container div {
            height: 50px;
            background-color: pink;
        }
        
    </style>
</head>
<body>
   
    <div class="container">
        <div class="col-lg-3 col-md-6 col-sm-12">1</div>
        <div class="col-lg-3 col-md-6 col-sm-12">1</div>
        <div class="col-lg-3 col-md-6 col-sm-12">1</div>
        <div class="col-lg-3 col-md-6 col-sm-12">1</div>
    </div>
    
</body>
</html>

4.4.2.3 bootstrap3 中文文档入门

全局CSS样式
表格按钮3、5版本基本通用（效果微微微调）
组件
下拉，分级标题。涉及操作的需要结合js使用
插件
三件套全有的封装
1、引入样式表
2、引入两个js表：jQuery和bootstrap的
3、cvcvcvcv
补充说明：
bootstrap3,4,5版本栅格冲突通过看文档初步了解区别，需另外加row类，此外，尺寸更加细分：540px 720px 960px 1140px。
除此之外，3,4,5版本的几个大的区别在于jQuery，ie浏览器的支持依赖与否,版本冲突影响到了轮播图案例的效果。
在此不做过多解释，仅为文档的初步入门学习用，代码修正如下：

<!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>bootstrap01</title>
    <!-- <link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap.min.css"> -->
    <!-- <link rel="stylesheet" href="../bootstrap-4.6.2-dist/css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="../bootstrap-5.2.3-dist/css/bootstrap.min.css">

    <style>
        

        .container div {
            height: 50px;
            background-color: pink;
        }
        
    </style>
</head>
<body>
   

    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4  col-lg-3">1</div>
            <div class="col-sm-6 col-md-4  col-lg-3">1</div>
            <div class="col-sm-6 col-md-4  col-lg-3">1</div>
            <div class="col-sm-6 col-md-4  col-lg-3">1</div>
            <div class="col-sm-6 col-md-4  col-lg-3">1</div>
            <div class="col-sm-6 col-md-4  col-lg-3">1</div>
            <div class="col-sm-6 col-md-4  col-lg-3">1</div>
            <div class="col-sm-6 col-md-4  col-lg-3">1</div>
            <div class="col-sm-6 col-md-4  col-lg-3">1</div>
            <div class="col-sm-6 col-md-4  col-lg-3">1</div>
            <div class="col-sm-6 col-md-4  col-lg-3">1</div>
            <div class="col-sm-6 col-md-4  col-lg-3">1</div>

        </div>
    
    </div>
    
</body>
</html>