# 移动 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、云计算、云服务器实践视频教程

上次更新时间: 6/8/2023, 9:23:17 PM

大厂最新技术学习分享群

大厂最新技术学习分享群

微信扫一扫进群,获取资料

X