# 移动 WebApp、多端响应式开发系统学习视频合集
系统学习移动 WebApp，多端响应式项目开发必备的相关知识
- Flex 弹性、Grid 网格布局从入门到实践
- 移动端项目开发必备核心知识
- 移动 WebApp 项目开发常用技术及标准、规范和最佳实践
- 多端响应式项目开发必备核心知识，响应式栅格系统
- 熟练掌握移动 WebApp 和多端响应式企业项目开发的完整流程和具体实践。
- UI 设计稿，在钉钉裙文件中或联系助理老师获取即可 ...
# 1、Flex 弹性布局从入门到实践
本节课包含的知识内容概述：
- Flex 布局的基本概念
- 什么是 Flex 布局，什么是 Flex 容器（Flex container）和 Flex 项目（Flex item）
- 什么是主轴，什么是交叉轴，Flex 项目的默认表现形式
- Flex 容器属性
- flex-direction 设置主轴方向，flex-wrap 项目如何换行，flex-flow 主轴方向和项目如何换行
- justify-content ，align-items ，align-content
- Flex 项目属性
- order 项目的排列顺序，align-self，flex-grow，flex-shrink，flex-basis ，flex 项目放大、缩小、空间占据
- Flex 布局在实际开发中的应用
- 元素水平垂直居，画 3 色子，双飞翼布局，星级评估
- flex 怎么实现盒子 1 在最左边，2 、3 在最右边
- 如何解决 flex 布局 7 个元素使用 space-between 最后一行两边分布的问题 ？
- 专项案例训练（作业）
- Flex 开发酷狗音乐播放列表，Flex 弹性布局（开发今日头条热门视频布局效果）
- Flex 弹性布局（开发微博热搜榜效果）
点击查看完整版视频讲解
# 2、Grid 网格布局从入门到实践
本节课包含的知识内容概述：
- Grid 网格布局的基础概念
- 什么是网格布局，什么是 grid 容器和项目，什么是行、列和单元格，什么是网格线
- 什么是网格轨道，什么是网格区域，什么是网格间距，什么是网格内容
- Grid 容器属性
- grid-template-columns 和 grid-template-rows 属性，row-gap、column-gap、gap 属性
- grid-template-areas，grid-auto-flow，grid-auto-columns 和 grid-auto-rows 属性
- justify-items，align-items，place-items，justify-content，align-content，place-content 属性，grid-template 和 grid 属性
- Grid 项目的属性
- grid-column-start ，grid-column-end ，grid-row-start ，grid-row-end 属性
- grid-column 、grid-row 属性，grid-area 属性，justify-self、align-self、place-self 属性
- 兼容性查询方法
- 不同浏览器的私有前缀，兼容性查询
- 专项案例训练（作业）
- Grid 网格布局（开发 360 图片展示效果），Grid 网格布局（小米商城左侧二级滑动菜单）
点击查看完整版视频讲解
# 3、移动端开发核心基础必备知识
本节课包含的知识内容概述：
- 什么是移动 Web、PC web 和 web App 开发
- 移动 Web 与 PC Web 开发区别
- 屏幕大小不同，交互方式不同，网络环境和设备性能的不同，兼容性不同
- 像素、分辨率、物理像素、逻辑像素、设备像素比
- 什么是像素，什么是分辨率，什么是物理像素与逻辑像素、设备像素比
- 为什么要有物理像素和逻辑像素之分，如何让相同尺寸下不同分辨率，看同一图片效果差别不大 ？
- 什么是标清屏和高清屏，移动开发为什么要使用 2 倍或 3 倍图
- viewprot 视口
- 在 pc 端和移动端，网页中 html、body 的默认宽度，不同设备下的显示
- 为什么移动端 body 的默认宽为 980px，视口分类，viewport 的设置
- 真机查看
- 创建本地服务器，查看本机 IP 地址，关闭电脑防火墙，手机端访问地址
- 移动开发中常用的单位
- em 相对单位，rem 相对单位，vw/vh 相对单位，vmax 和 vmin
点击查看完整版视频讲解
# 4、Swiper 插件在移动端的应用和实践
本节课包含的知识内容概述：
- Swiper 的使用方法
- 如何查看官方文档，配置简单轮播图
- 如何修改轮播图的样式
- Swiper 的常用 API
- Swiper 初始化，Swiper 基础配置，Swiper 事件，Swiper 属性，Swiper 方法
- swiper 实战应用
- 一行多列滑动效果，Tab 选项卡双向切换效果
点击查看完整版视频讲解
# 5、移动 WebApp 项目开发，流体布局
本节课包含的知识内容概述：
- 移动端与 PC 端有哪些不同？
- 移动端常见的布局处理技术？
- 流体布局、rem 和 vw 布局、响应式布局、Flex 弹性布局（工具）、Grid 网格布局（工具)
- 移动设计稿的标准与规范围
- 流体布局的核心：百分比% +怪异盒子模型
- 移动端流体布局的项目开发流程
- 流体布局中图片、背景图片、精灵图、圆形菜单等比缩放处理
- iOS 下 tabbar 底部留白与黑线遮挡问题
- 流体布局的布局思路与缺陷
点击查看完整版视频讲解
# 6、移动 WebApp 项目开发，rem 布局（上）
本节课包含的知识内容概述：
- rem 实现适配的原理
- JS 动态实现不同设备下 1rem 的大小
- 一键实现所有 px 单位为转换为 rem 单位
- 利用 rem 实现元素宽高等比缩放
- 实际开发中用 rem 做适配的流程
- red 项目实战布局
- 项目开发流程
- rem+flex 弹性布局
- 可拖动的菜单
- flex 布局实现多行多列导航
点击查看完整版视频讲解
# 7、移动 WebApp 项目开发，rem 布局（中）
本节课包含的知识内容概述：
- red 项目实战布局
- Flex 实现左中右布局，同时中间自适应溢出显示省略号
- 选项卡切换与轮播特效的综合应用
- 可拖动的图片列表，关于样式的重用
- 底部 tabar 导航栏布局
点击查看完整版视频讲解
# 8、移动端 WebApp 项目开发，rem 布局+vw（下）
本节课包含的知识内容概述：
- red 项目实战布局
- 修复 Flex 实现左中右布局，同是中间自适应溢出显示省略号问题
- 选项卡切换中 Swiper 初始化产问题生的本质是什么？
- 关于 line-height:normal;可能存在的隐患
- 移动端 vw 项目实战
- vw 的适配原理，px 如何转换成对应 vw 单位
- 实际开发如何用 vw 做适配，项目实战开发
- rem+vw 的混合开发方式
- 经典的 1 像素问题
点击查看完整版视频讲解
# 9、多终端响应式开发核心基础
本节课包含的知识内容概述：
- 媒体查询的语法
- 什么是媒体查询，媒体类型，媒体特性，逻辑运算符
- 响应式断点和书写位置
- 响应式断点（阈值）的设定
- 媒体查询的代码书写位置
- 响应式两种适配方案
- PC 端优先
- 移动端优先
- 响应式栅格系统，栅格布局
- 栅格系统实现响应式布局整个流程
- 你打算将页面分成多少份？
- 确定响应断点有哪些？
- 确定响应式适配方案
- 在对应的响应断点下，书写对应的栅格布局样式
- 对着 PC 端设计稿开发，搭建整个响应式的框架
点击查看完整版视频讲解
# 10、多终端响应式开发项目最佳实践
本节课包含的知识内容概述：
- 响应式项目整个开发流程
- 响应式后台管理布局实现
- 响应式整体框架（左侧、顶部、底部固定，右自适应）布局
- 右侧主体 4-2-1 响应式布局实现
- 整站响应式布局实现
- 响应式过程导航（从一行变成一列显示）处理
- 响应式过程左侧菜单（从显示-半显示-隐藏）处理
- 左侧二级伸缩菜单实现
点击查看完整版视频讲解
# 11、云计算、云服务器实践视频教程
完成所学项目的部署
大厂最新技术学习分享群
微信扫一扫进群，获取资料
X