移动web学习笔记

移动web开发实战

前端开发学习路线：

​ https://www.bilibili.com/read/cv10431130?from=articleDetail

• 内联标签定义宽高一定要转出块标签！

CSS3 d1&d2

丰富网页的呈现方式和效果

字体图标

​ 下载字体包：https://www.iconfont.cn 选择官方图标库

如何下载好的字体图标：

• 用 link 引样式表

• 调类名（必须调用两个蕾姆）
  • iconfont大类
  • icon-xxxx 具体类

平面转化

使用transform属性实现平面的平移、旋转、缩放~

• 平移 transform：translate(x, y)

案例一

• 旋转 transform: rotate(…deg) 必须要有过渡！

• 缩放 transform: scale(times)

渐变

使用background-image属性实现渐变~

空间转换

• 空间平移

注：如果要体现出z轴变化的视觉效果，需要在父级添加perspective属性~ 一般取800-1200px

• 空间旋转
  • 绕x轴转 transform: rotateX(deg)
  • 绕y轴转 transform: rotateY(deg)
  • 绕z轴转 transform: rotateZ(deg)
• 立体呈现
  1. 在父级添加transform-style: preserve-3d
  2. 在子级构建空间立体
• 空间缩放

动画

定义动画＋使用动画

.box {
  width: 200px;
  height: 100px;
  background-color: pink;

  /* 使用动画 */
  animation: change 1s infinite alternate forewards;
}

/* 一. 定义动画：从200变大到600 */
@keyframes change {
  from {
    width: 200px;	
  }
  to {
    width: 600px;
  }
} 


/* 二. 定义动画：200 到 500*300 到 800*500 */
/* 百分比指的是动画总时长的占比 */
@keyframes change {
  0% {
    width: 200px;
  }
  50% {
    width: 500px;
    height: 300px;
  }
  100% {
    width: 800px;
    height: 500px;
  }
}

Flex

作用和浮动(?)类似，让标签排在一行

视口标签

让网页的宽度和设备宽度相同~

<meta name="viewport" content="width=device-width, initial-scale=1.0">

百分比布局/流式布局

/* 相对于父级 */
width: 100%;	
height: 50px;

flex布局

技术兼容性？ https://caniuse.com/

如何使用？ 在父级添加display: flex;

主轴，交叉轴？

弹性容器，弹性盒子？

主轴对齐方式

justify-content属性

display: flex;

/* 居中 */
justify-content: center;

/* 间距在弹性盒子(子级)之间 */
justify-content: space-between;

/* 所有地方的间距都相等 */
justify-content: space-evenly;

/* 间距加在子级的两侧 */
/* 视觉效果: 子级之间的距离是父级两头距离的2倍 */
justify-content: space-around;

侧轴对齐方式

align-items

display: flex;

/* 居中 */
/* align-items: center; */

/* 拉伸,默认值(现有状态,测试的时候去掉子级的高度) */
/* align-items: stretch; */

align-self

/* 单独设置某个弹性盒子的侧轴对齐方式 */
.box div:nth-child(2) {
align-self: center;
}

修改flex主轴方向

//在父级中调整
flex-direction: column;

弹性盒子换行

flex-wrap: wrap;

移动适配

移动设备的网页元素跟随屏幕大小等比例变化

rem单位

1. 给html标签加字号

2. rem为单位

/* 1rem = 1html标签字号大小 */
html {
  font-size: 20px;
}

.box {
  width: 5rem;
  height: 3rem;
  background-color: pink;
}

媒体查询

/* 使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 */
@media (width:375px) {
  html {
  	font-size: 40px;
  }
}

@media (width:320px) {
  html {
  	font-size: 30px;
  }
} 

引入flexible.js完成媒体查询

Less

Less是css的预处理器，后缀名是.less

• 嵌套功能

.father {
    width: 100px;
    .son {
        color: pink;
        // & 表示当前选择器
        &:hover {
            color: green;
        }
    }

    &:hover {
        color: orange;
    }
}

• 变量功能

// 1. 定义. 2.使用
@colora:green;

.box {
    color: @colora;
}

.father {
    background-color: @colora;
}

.aa {
    color: @colora;
}

• Less导入

import后面一定要加空格~

@import './01-体验less.less';
@import './02-注释';

• 控制导出

// out: ./qqq/daqiu.css

// out: ./abc/ 

.box {
    color: red;
}

• 禁止导出（当该less文件要被导入时）

// out: false

响应式

实质就是媒体查询，根据视口宽度，设置差异化样式~

Max-width / min-width

/*
  视口宽度 >= 768px，网页背景色是 粉色
  视口宽度 >= 992px，网页背景色是 绿色
  视口宽度 >= 1200px，网页背景色是 skyblue
*/

/* css属性都有层叠性 */

/* @media (min-width: 1200px) {
  body {
  	background-color: skyblue;
  }
} */

@media (min-width: 768px) {
  body {
  	background-color: pink;
  }
}
@media (min-width: 992px) {
  body {
  	background-color: green;
  }
}
@media (min-width: 1200px) {
  body {
  	background-color: skyblue;
  }
}

Bootstrap

1 使用

<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

2 栅格系统

默认有12份(排4个–3，排2个–6)

    <!-- 需求: 大屏: 一行排列4个内容; 中屏:一行排列2个内容 -->
    <div class="container">
        <div class="col-lg-3 col-md-6">1</div>
        <div class="col-lg-3 col-md-6">2</div>
        <div class="col-lg-3 col-md-6">3</div>
        <div class="col-lg-3 col-md-6">4</div>
    </div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nhHqglh1-1660878179523)(/Users/chenyuanjian/Library/Application Support/typora-user-images/image-20220819102307223.png)]