02.移动web总结

A_xin
443 阅读9分钟

1.字体图标：iconfont

​ 字体图标展示的是图标，本质是字体

优点:

  • 灵活，方便修改样式颜色、字体（color，font-size）
  • 轻量级 ，体积小， 渲染快，降低服务器请求次数
  • 兼容性强
  • 使用方便

使用方法:

  • 1.使用Unicode编码
<!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">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <title>Document</title>
    <style>
        span {
            font-family: 'iconfont';
        }
    </style>
</head>
<body>
    <span class="s1">&#xe8ab;</span>
    <span class="s2">&#xe8ac;</span>
    <span class="s2">&#xe8ad;</span>
    <span class="s2">&#xe8ae;</span>
</body>
</html>
  • 2.使用iconfont类名
<!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">
<link rel="stylesheet" href="./01字体图标/iconfont/iconfont.css">
<title>Document</title>
</head>   
<body>
    <span class="iconfont icon-Dyanjing s1"></span>
    <span class="iconfont icon-caidan s2"></span>
    <span class="iconfont icon-anquan s3"></span>
</body>
</html>
  • 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">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3243645_8568gh9eemr.css">
    <title>Document</title>
</head>
<body>
    <span class="iconfont icon-Dyanjing s1"></span>
    <span class="iconfont icon-caidan s2"></span>
    <span class="iconfont icon-dianzan s3"></span>
</body>
</html>

免费的字体图标网站：

​ www.iconfont.com

工作中：

    1. 如何制作图标 美工的工作 需要了解

    2. 前端关注 如何根据拿到的图标来使用它

2.平面转换：transform

目标：

  • 使用transform属性实现元素的位移、旋转、缩放等效果 。
  • 平面：是从坐标轴角度定义的。 x 轴和y 轴两条轴线构成一个平面。
  • 平面转换又叫 2D转换 。
  • 属性：transform

1.位移：translate

目标：

​ 使用translate实现元素位移效果

语法：

​ transform: translate(水平移动距离, 垂直移动距离);

取值：

​ （正负均可）

​ 像素单位数值

​ 百分比（参照物为盒子自身尺寸）

​ 注意：X轴正向为右，Y轴正向为下

技巧 ：

​ translate()如果只给出一个值, 表示x轴方向移动距离

​ 单独设置某个方向的移动距离：translateX() & translateY()

位移-绝对定位居中 ：

1647527904029

与定位区别：

​ 定位会脱标，可能影响其他盒子的位置

​ 定位会使行内元素转换为行内块元素

<!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>
    <style>
        .father {
            position: relative;
            width: 600px;
            height: 600px;
            margin: 100px auto;
            background-color: pink;
        }
        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            /* margin数值相对于父盒子移动 */
            /* margin-top: -100px;
            margin-left: -100px; */
            background-color: red;
            /* transform相对于自己盒子移动 */
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

1647240314334

2.旋转：rotate（deg）

目标：

​ 使用rotate实现元素旋转效果

语法 ：

​ transform: rotate(角度);

​ 注意：角度单位是deg

技巧：

​ 取值正负均可

​ 取值为正, 则顺时针旋转

​ 取值为负, 则逆时针旋转

1647245918241

3.旋转原点：origin

​ 目标：使用transform-origin属性改变转换原点

​ 语法：默认圆点是盒子中心点

​ transform-origin原点水平位置，原点垂直位置

​ 取值：方位名词（left、top、right、bottom、center）

​ 像素单位数值

​ 百分比（参照盒子自身尺寸计算）

4.当位移和旋转共同出现的时候

1 先位移后旋转

2 先旋转后位移

3 以上两个效果不一样！！！！

4 原因：先旋转的时候，坐标系也在旋转

1647248912308

5.缩放：scale

  • （x轴缩放倍数，y轴缩放倍数）
  • 使用：transform：scale（2， 0.5）；//长宽方向使用一个缩放比
  • 注意：
    • 后面所有属性都不会影响其他盒子的位置（transform特点）
    • 缩放，使下面的文字，css属性，子元素都会跟着缩放
img:hover {
	transform: scale(1.2);
}

6.渐变：background-image

使用方法

1647252989692

1647253460783

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>01-渐变.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div {
        width: 400px;
        height: 400px;
        margin: 100px auto;

        /* 
        渐变 
        1 一定要给背景图片添加 不是 背景 颜色！！！ （渐变不是单指一种颜色）
        2 最为常见的！！ 
        */

        /* background-image: linear-gradient(black, red); */
        /* 设置多种渐变的颜色 */
        /* background-image: linear-gradient(black, blue, red); */
        /* 分层的渐变效果 不算 两种颜色 比较常用渐变！！ */
        /* 
        盒子上下划分 高度  100% 
        0% - 30%  black
        30% - 50%  black - red
        50% - 80%  red -> blue
        80% - 100% blue
         */

        /* background-image: linear-gradient(
          black 30%,
          red 50%,
          blue 80%,
          blue 100%
        ); */

        /* 渐变的方向 */
        /* 

        方位名词 
        1 默认值 to bottom  从上到下
        2 上到下  to  top 
        3  右上角 to  right top 

        角度 deg 
         */
        /* background-image: linear-gradient(to right top, black, red); */
        background-image: linear-gradient(0deg, black, red);

        /* 
        总结
        1 要给 背景图片添加 
        2 设置 多种渐变色
        3 设置 多种渐变色 分层
        4 设置 渐变颜色方向
          1 方位名词
          2 100deg 
         */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
注意：

​ 渐变是没有过渡效果

​ 图片有过渡效果

3.空间转换 transform3d

目标：

​ 使用transform属性实现元素在空间内的位移、旋转、缩放等效果

  • 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
  • 空间转换也叫3D转换
  • 属性：transform3D

透视：perspective

  • 属性：perspective （800px-1200px） 近大远小
  • 一般加在body上
  • 值越小，变化越剧烈

1647327963524

位移translate3d:

  • 使用：与2d基本相同
  • 注意：默认情况下看不见z轴上的变化
  • tranlate3d: ( X , Y , Z )；

旋转rotate3d：

  • 使用：与2d基本相同
  • 左手定律 ：大拇指指向坐标轴方向，四指弯曲指向坐标轴正值
  • 注意：z轴方向屏幕垂直向外
  • 自定义轴向 ： transform:rotate3d(1,1,0,45deg)

缩放scale3d：

  • 使用：基本与2d相同
  • 注意：z轴无效果
  • transform: scale3d ();

transform3D简写

  • transform : translate3d() ,rotate3d () ,scale3d ();
  • Z轴方向由屏幕里面指向屏幕外面
    • 由内向外为正值
    • 由外向外为负值

开启3D转换

  • 给做3d转换的元素的亲生父亲开启空间：tansform-style:preserve-3d

4.动画 ： animation

使用：

  • 定义动画

    两种方法：from{} to{}； 0% {} 50%{} 100% {}；

1647485075913

1647485413913

  • 调用动画

1647485198579

  • 注意：哪个元素需要调用动画就加在哪个元素的里面

属性：

  • 动画名称：animation-name:dong_hua

  • 执行时间：animation-duration:1s;

  • 速度变化：animation-timing-function:linear（匀速）ease-in(先慢后快) ease-out(先快后慢);,其中有个拆分步骤steps(n)

  • 动画延迟 ：animation-delay:1s ;

  • 循环次数 ：animation-iteration-count:infinite（无限循环）;

  • 动画运动方向：animation-diretion: normal（先正再正） 默认值；alternate （先正再反） 常用；reverse （先反再反）；alternate-reverse （ 先反再正）；

  • 动画等待结束状态 ：animation-fill-mode:forwards（最后一帧）/backwards（第一帧）/both;

  • 动画播放状态 ：animation-paly-state:paused（暂停）/running（运动）;

    1647499300374

    1647499486712

总结：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>01-动画实现步骤.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div {
        width: 200px;
        height: 200px;
        background-color: aqua;
        /* margin: 200px auto; */

        /* 动画的 复合写法 */
        /* animation: ani_1 5s; */

        /* 单个讲解属性 */

        /* 动画的名称 */
        animation-name: ani_1;
        /* 动画的持续时间 */
        animation-duration: 2s;
        /* 动画的延迟时间 */
        /* animation-delay: 3s; */
        /* 
        动画正常播放之外的状态（延迟、播放结束） 
        在延迟的时间内  
        1 显示的是 自身的颜色 属性 
        2 设置  在延迟的时间内 显示 0% 画面  backwards
        3 整个动画播放完毕了 动画 停留在最后一帧的画面 还是回到 自身的属性 画面上 
          设置动画 播放完毕了 停留在 最后一帧画面   forwards

        4 both  
          同时设置了  backwards 和  forwards

         */
        /* animation-fill-mode: both; */

        /* 
        设置动画的播放次数 2 
         */
        animation-iteration-count: infinite;

        /* 
        设置动画的播放的方向  animation-direction

        1 默认值  normal    先正再正      常用
        2 alternate   先正再反   常用
        3 reverse   先反再反
        4 alternate-reverse  先反再正

         */
        animation-direction: alternate-reverse;
      }

      @keyframes ani_1 {
        0% {
          background-color: black;
          margin-left: 0;
        }

        100% {
          background-color: yellow;
          border-radius: 50%;
          margin-left: 1000px;
        }
      }
    </style>
  </head>
  <body>
    <div>动画的体验</div>
  </body>
</html>

5.移动端屏幕知识

1、逻辑分辨率

是由软件（驱动）决定的

2、设备分辨率

是生产屏幕时就固定的，它是不可被改变的

3、注意

制作网页参考逻辑分辨率

4、布局视口

目标

  • 使用meta标签设置视口宽度，制作适配不同设备宽度的网页

  • 手机屏幕尺寸都不同， 网页宽度为100%

  • 网页的宽度和逻辑分辨率尺寸相同。

属性
  • viewport：视口
  • width=device-width：视口宽度 = 设备宽度
  • initial-scale=1.0：缩放1倍（不缩放）

1647761314775

5、二倍图

目标：
  • 能够使用像素大厨软件测量二倍图中元素的尺寸
  • 图片分辨率, 为了高分辨率下图片不会模糊失真
  • 现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。
  • 二倍图设计稿尺寸：750px。

1647761432146

6.百分比布局

目标：

  • 能够使用百分比布局开发网页
  • 百分比布局， 也叫流式布局
  • 效果： 宽度自适应，高度固定。

使用：

  • width:100% 宽度占屏幕百分百

  • height：100% 高度占屏幕百分百

7.flex布局

Flex布局/弹性布局：

  • 是一种浏览器提倡的布局模型

  • 布局网页更简单、灵活

  • 避免浮动脱标的问题

  • display:flex;

  • vertical-align,clear,float失效

  • 定位，margin，变换有效（都是传统布局技术）

1647511359227

容器属性：

  • display:flew 设置普通盒子变为flew盒子
  • flex-direction:row/column主轴方向设置
  • justify-content:flex-start（默认对齐）/flex-end（右对齐）/center（居中对齐）/space-around（四间隙存放，两侧空间小于中间）/space-between（先两侧对齐，间隙存放）/space-evenly(绝对平均) 控制子元素在主轴上排布方式
  • flex-wrap:wrap/nowrap;是否换行；默认不换行，当子元素设置宽度，会进行合理压缩
  • flex-flow:flex-direction/flex-wrap
  • align-items:flex-start/flex-end/center/stretch;控制子元素侧轴对齐方式（其中子元素只有一行）
  • align-content:flex-start/flex-end/center/space-round/space-between/stretch控制子元素侧轴对齐方式（其中子元素为多行）

项目属性：

  • ​ flex:设置百分比或者份数

  • align-self:控制单独子元素侧轴上对齐方式

    • 注意：默认值是auto,当父元素设置align-items或者align-content,会继承父元素值，当父元素没有设置，值为stretch

  • order设置子元素的排列，值越小，越靠前

注意：

  • 子元素宽度于

  • 子元素不设置高度，会被拉伸与父元素一样高

  • 默认情况下flew不会换行，会挤压成一排

8.flew布局/弹性布局

目标：

  • display：flew 设置普通的盒子变为flew盒子
  • 是一种浏览器提倡的布局模型
  • 布局网页更简单、灵活
  • 避免浮动脱标的问题

属性：

父项：

  • display:flex 设置普通的盒子变为 flex盒子
  • justify-content 设置主轴对齐方式

    • flex-start 左对齐

    • flex-end 右对齐

    • center 居中对齐

    • space-between 先两侧对齐，间隙存放

    • space-around 四间隙存放，两侧空间小于中间

    • space-evenly 绝对平均

  • align-items 设置侧轴对齐方式（单行）

    • center 居中对齐

    • flex-start 顶部对齐

    • flex-end 底部对齐

  • align-content 设置侧轴对齐方式（多行）

    • flex-start 左对齐

    • flex-end 右对齐

    • center 居中对齐

    • space-between 先两侧对齐，间隙存放

    • space-around 四间隙存放，两侧空间小于中间

    • space-evenly 绝对平均

  • flex-wrap 设置换行

    • nowrap 默认值 不换行

    • wrap 换行

  • flex-direction 设置主轴方向
    • row （默认值 ）左到右

  • row-reverse 右到左

    • column （常用） 上到下

    • column-reverse 下到上

    ​

子项：

  • justify-content 设置主轴对齐方式

    flex 设置 子项占父项宽度（高度）的比例

  • align-self 设置子项自己 在侧轴上的对齐方式

    ​ center居中对齐

    ​ flex-start 顶对齐

    ​ flex-end 底对齐

    ​

    注意：

    • vertical-align,clear,float失效
    • 定位，margin，变换有效（都是传统布局技术）
    • 设置了flew布局，子元素子项可以直接加宽高
    • 默认子元素的宽度由内容撑开，高度会被拉伸与父元素一样高
    • 默认情况下flew不会换行，会挤压成一排

1647654115343

9.布局思路

  • 1.不要被技术限制了
    • 浮动
    • 定位
    • 标准流
    • flew
    • 以上这些技术，那些简单方便的实现功能就是用那些
  • 2.先划分大盒子，写注释，加内容，加颜色区分
  • 3.调试代码的时候，多利用谷歌浏览器
  • 4.一般布局容易出错的情况
    • 1标签嵌套错了
    • 2标签和选择器对应不上
    • 3css样式优先级顺序
  • 5.当一个模块无从下手时，只看大内容，不用看文字 小图标
    • 从大的框架开始布局，从上到下，从左到右

10.移动屏幕适配

vw /vh

  • 能够使用vw单位设置网页元素的尺寸
  • 相对单位 , 相对视口的尺寸计算结果
  • vw：viewport width
  • 1vw = 1/100视口宽度
  • vh：viewport height
  • 1vh = 1/100视口高度
  • 注意： 现实开发中，vw和vh不会混用， vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形
计算1647908893766

1647908951994

解决方案

1647908158820

代码

1647908993713

插件

1647908813470

rem

  • 能够使用rem单位设置网页元素的尺寸
  • 屏幕宽度不同，网页元素尺寸不同（等比缩放）
  • 相对单位 ， rem单位是相对于HTML标签的字号计算结果
  • 1rem = 1HTML字号大小
代码

1647908261686

思路

1647908276863

插件

1647908287610

flexible

  • 使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
  • flexible.js是手淘开发出的一个用来适配移动端的js框架。
  • 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

rem 和 vw / vh 的区别

rem
  • 需要不断修改html文字大小
  • 需要媒体查询media
  • 需要 flexible.js

11. less 知识

认识

​ less是一种提高我们编写css效率的技术=>css预处理器

​

1647911335477

代码

1647911349329

变量

1647913182685

​

运算

​ 1647914037629

mixin语法

​ 1647916127828

​ 嵌套关系

​ 1647917000129

1647916472274

总结

1647916449486

12 .媒体查询 @media

初体验

1647937120857

语法 1647937143761

指定区间

​ 1647937987508

案例

1647940699734

13. bootstrap ui框架

网站v3.bootcss.com/

​ 1647942808803

1647945042977

1647946390763

14. 导航模块水平滚动

1647920031911

15.可以出现第n行省列隐藏

​ display: -webkit-box; ​ overflow: hidden; ​ white-space: normal!important; ​ text-overflow: ellipsis; ​ word-wrap: break-word; ​ -webkit-line-clamp: 3; ​ -webkit-box-orient: vertical;

avatar
文章
阅读
粉丝